Save data after each change to the data set, using Handsontable's API hooks. Preserve the table's state by saving data to the local storage.
To track changes made in your data grid, use Handsontable's
The example below handles data by using
fetch. Note that this is just a mockup, and nothing is actually saved. You need to implement the server-side part by yourself.
You can save any type of data in local storage to preserve the table state after page reloads. The
persistentState option must be set to
true to enable the data storage mechanism. You can set it either during the Handsontable initialization or using the
Persistent state storage is particularly useful when running multiple instances of Handsontable on one page as it allows data separation per each instance.
The main benefit of using the
PersistentState plugin hooks rather than the regular
localStorage API is that it ensures separation of data stored by multiple Handsontable instances. For example, if you have two or more instances of Handsontable on one page, data saved by one instance will be inaccessible to the second instance. Those two instances can store data under the same key, and no data would be overwritten.
For the data separation to work properly, make sure that each instance of Handsontable has a unique