This is the 8th day of my participation in Gwen Challenge

LocalStorage features:

1. LocalStorage expands the 4K limit of cookies;

2, localStorage will be able to directly store the first request data to the local, which is equivalent to a 5M size database for the front-end page, compared to cookie can save bandwidth, but this is only supported in the browser of higher versions;

3, the size of the browser is not uniform, and THE Internet Explorer version in IE8 or above only support the localStorage property;

4. At present, all browsers will limit the value type of localStorage to string, which needs some conversion for the common JSON object type in our daily life;

5. LocalStorage is unreadable under the browser’s privacy mode;

6, localStorage is essentially to read the string, if the storage content will consume memory space, will lead to page card;

7. LocalStorage cannot be captured by crawlers; The only difference between localStorage and sessionStorage is that localStorage is a permanent storage, while sessionStorage is a key/value pair of sessionStorage will be cleared when the session ends.

8, the use of localStorage also follows the same origin policy, so different websites directly cannot share the same localStorage

SessionStorage:

1, localStorage and sessionStorage; 2, localStorage belongs to persistent save (unless you delete, otherwise keep) sessionStorage is temporary save (page refresh data is gone); 3, localStorage can save data across pages, sessionStorage can not;

Precautions for using localStorage:

1. A key can save only one piece of data in localStorage

2. If you want to store multiple pieces of data in the same key, you can store multiple pieces of data in an array and then locally

3. If you store multiple data in an array, the result is a string

4. The perfect solution for local storage in the future:

Parse () converts the retrieved result to the corresponding array

The result: the data is converted from a string to an array, so that the data can be retrieved for subsequent operations

Cookie features:

Size: about 4K; Temporary save: Close the browser and disappear; Save data across pages; Cookies can be created, read, and deleted using the document. Cookie property. Cookies can also be assigned an expiration time (in UTC or GMT)

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";
Copy the code

Setting value: document. Cookie =”username=John Doe”; The value can be: var x = document.cookie; Delete value: Very simple, just set the expires parameter to the previous time, example: document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 GMT”;

Introduce vuex in main.js:

import Vuex from 'vuex'; Vue.use(Vuex); New Vue({el: '#app', router, store, // Insert store into root node components: {app}, template: '< app />'});Copy the code

Create four js files in the store folder under SRC /, as shown below:

Write index. Js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  getters
})
Copy the code

Write state. Js

// If there are tokens in the local cache, Let defaultToken = "try {if (localstorage.token) {defaultToken = localstorage.token}} Catch (e) {} export default { token: defaultToken }Copy the code

Write mutation. Js

Export default {changeToken (state, token) {// During login or registration, Token = token try {localstorage. token = token} catch (e) {}}, ClearToken (state) {localstorage. token = '' state.token = ''}}Copy the code

Write getters. Js

Export default {login: state => {// Calculate the login status and return a Boolean value return state.token! = = '}}Copy the code

Call method:

Use the three auxiliary functions mapState mapMutations mapGetters corresponding to VUEX

/ / within the components into the import {mapState mapMutations, mapGetters} from 'vuex computed: {... MapState (['token']), // You can use this. Token to access... MapGetters (['login'])} methods: {... Open mutations (('clearToken'))Copy the code