1. Differences and applicable scenarios
(1) Difference:
Vuex is stored in memory , localstorage (local storage) is stored locally as a file for permanent storage; sessionstorage (session storage) is temporarily stored. LocalStorage and sessionStorage can only store string types . For complex objects, you can use stringify and parse of the JSON object provided by ECMAScript to process.
(2) Application scenarios:
Vuex is used to pass values between components , and localstorage is mainly used to pass values between different pages .
(3) Permanent:
The value stored by vuex will be lost when the page is refreshed, but localstorage will not. Note: Many students think that using localstorage can replace vuex, and it is indeed possible for unchanged data, but when two components share a data source (object or array), if one of the components changes the data source, hope the other component will respond When it should change, localstorage cannot be responsive, and vuex can bind data responsive .
2. Use scenarios of Vuex data state persistence
(1) Shopping cart
For example, after you add the product to the shopping cart, if it is not saved in the background, the front end will save it, and you can use vuex+localStorage(sessionStorage) in this way.
(2) Session state
After authorized login, the token can be stored using Vuex+localStorage(sessionStorage).
(3) Some data that will not change frequently
For example, a list of cities, etc. (currently also leave an entry that can be updated, such as version number)
Tips : localStorage.setItem(key, String), the value of set must be a string. If your data is an object, you need to convert it first (JSON.stringify(xxx)), when you take it out, localStorage.getItem(key), after taking it out The string can be converted back to the object through JSON.parse(xxx).
Reprinted from: https://www.cnblogs.com/huayang1995/p/13865362.html