Vue入门(四)LocalStorage的使用

前言

这个系列是vue入门系列，在讲解的时候主要以例子，展示一些vue内容的基本用法。在vue项目中使用LocalStorage 的场景非常多，这里用一个小例子展示LocalStorage的使用。

案例

一、LocalStorage 的作用

对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage

sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载.

localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在.

二、根据localStorage实现的效果

三、vue项目代码

目录结构

1、更改main.js 文件，添加 store 的引入

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
   
  el: '#app',
  router,
  store,
  components: {
    App },
  template: '<App/>'
})

2、创建main.js 文件中引入store

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import local from './localStoreDemo.js'


Vue.use(Vuex)
export default new Vuex.Store({
   
    modules: {
   
        local
    }
})

store/localStoreDemo.js

let demoDataStr = localStorage.getItem('demoData')
let defaultData = JSON.parse(demoDataStr) == null ? [] : JSON.parse(demoDataStr)

//1、定义数据
const state = {
   
    demoData: defaultData
}

//2、提供对外访问的接口
const getters = {
   
    //{
   redBalls:'01,02,03,04,05,06',blueBall:'15',count:1}
    dataLength: (state) => state.demoData.length,
    getData: (state) => state.demoData,
    totalSize: (state) => {
   
        let totalCount = 0;
        state.demoData.forEach((item)