Products
Star

Local value persistence

The following example shows a two-way binding dropdown with an event to save its value on the localStorage. The self is assigned when the page is refreshed.

Example

The value is updated on the localStorage on the dropdown changes its value.

Source code

<html>
<script src="https://lemonadejs.com/v2/lemonade.js"></script>
<div id='root'></div>
<script>
var Persistence = (function() {
    var self = {};

    // Default value of the property which is bound to the value of the dropdown
    self.language = localStorage.getItem('language');

    // Do something when the self.language changes using the onchange lemonadeJS native tracker
    self.onchange = function() {
        // Persist language
        localStorage.setItem('language', self.language);
    }

    var template = `<div>
        <select @bind="self.language">
            <option value="">Choose one</option>
            <option value="en_GB">English</option>
            <option value="pt_BR">Portuguese</option>
        </select>
    </div>`;

    return lemonade.element(template, self);
});

lemonade.render(Persistence, document.getElementById('root'));
</script>
</html>

See this example on codesandbox

Edit this page on GitHub