Local value persistence

The following example shows a two-way binding dropdown with an event to save its value on the localStorage.


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

Source code

<script src="https://lemonadejs.net/v3/lemonade.js"></script>
<div id='root'></div>
function Persistence() {
    const self = this;

    // 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);

    return `<select :bind="self.language">
        <option value="">Choose one</option>
        <option value="en\_GB">English</option>
        <option value="pt\_BR">Portuguese</option>
lemonade.render(Persistence, document.getElementById('root'));

See this example on codesandbox