---
title: "Value persistence | LemonadeJS v4"
description: "LemonadeJS v4 archive. Integrate a reactive LemonadeJS component with the JavaScript localStorage to persist a state value."
source: https://lemonadejs.com/docs/v4/examples/value-persistence/
---

Local value persistence
=======================

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

Example
-------

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

  
  

### Source code


```html
<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs@4/dist/lemonade.js"></script>
<div id='root'></div>
<script>
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>
    </select>`;
}
lemonade.render(Persistence, document.getElementById('root'));
</script>
</html>
```
```javascript
import lemonade from 'lemonadejs';

export default 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);
        console.log(localStorage.getItem('language'))
    }

    return `<select :bind="self.language">
        <option value="">Choose one</option>
        <option value="en_GB">English</option>
        <option value="pt_BR">Portuguese</option>
    </select>`;
}
```

[See this example on codesandbox](https://codesandbox.io/s/lemonadejs-value-persistence-p2hbvf)