LocalStorage Value Persistence
This example demonstrates a dropdown component with two-way data binding. The selected value is saved to localStorage whenever the dropdown's value changes.
Example
The value is automatically updated in localStorage whenever the dropdown's selection changes.
<html>
<script src="https://lemonadejs.com/v5/lemonade.js"></script>
<div id='root'></div>
<script>
let { onchange } = lemonade;
function Persistence() {
// Default value of the property which is bound to the value of the dropdown
this.language = localStorage.getItem('language');
// Do something when the self.language changes using the onchange lemonadeJS native tracker
onchange((prop) => {
// Persist language
localStorage.setItem('language', this.language);
});
return render => render`<select :bind="${this.language}">
<option value="">Choose one</option>
<option value="en_GB">English</option>
<option value="pt_BR">Portuguese</option>
</select>`;
}
lemonade.render(Persistence, document.getElementById('root'));
</script>
</html>
import { onchange } from 'lemonadejs';
export default function Persistence() {
// Default value of the property which is bound to the value of the dropdown
this.language = localStorage.getItem('language');
// Do something when the self.language changes using the onchange lemonadeJS native tracker
onchange((prop) => {
// Persist language
localStorage.setItem('language', this.language);
});
return render => render`<select :bind="this.language">
<option value="">Choose one</option>
<option value="en_GB">English</option>
<option value="pt_BR">Portuguese</option>
</select>`;
}