How to get or set localStorage value when enablePersistance is set as "True"?

When you want to make changes in a page of data, while navigating to another page, and want to see the modified data in the initial page of the browser while using enablePersistence, you can use window.localStorage.

Consider an example where you have rendered a grid in a page, with enablePersistence enabled, navigate to another page and dynamically add or remove a column from the grid model. When you navigate back to the page with the grid, the grid must reflect the changes made in the grid model.

You can achieve this requirement using the window.localStorage object. Local storage object stores large amounts of data, without affecting the website’s performance. The data stored in localStorage has no expiry.

Local storage is a browser based technology accessible via javascript, only on client-side.
When you render the grid with Persistence enabled, the grid updates its model from the local storage value, before being rendered. So, when you navigate to another page, you can change the local storage values to add a new column for the grid, and when you return to the grid page, you can see the newly added column.

You can get the localStorage values using the getItem method of the storage interface as shown in the following code example and pass it to server-side for modifications.

JS

<script type="text/javascript">
var value = window.localStorage.getItem("ejGridGridtest"); //"ejGridGridtest” is pluginname + control id.
var model = ej.parseJSON(value)
</script>

In server-side, after making the modifications in the grid model, you can return it to client-side to update the browser’s local storage with the updated value. You can refer to the following code examples on how to update the browser’s localStorage for grid control.

JS

<script type="text/javascript">
window.localStorage.setItem("ejGridGridtest", JSON.stringify(model)); //Updating localStorage with new model values.
</script>