vue2 vuex中使用本地储存

本地储存 基本用法

它包含两种：localStorage 和 sessionStorage

sessionStorage（临时存储） ：只存在网站开启期间,重新加载就会重置

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

设置方法

对象需要通过JSON.stringify转为json字符出
sessionStorage.setItem(“名称”,“对象”)
localStorage.setItem(“名称”,“对象”)

获取方法

 var data1 = JSON.parse(sessionStorage.getItem('key'));
 var data2 = JSON.parse(localStorage.getItem('key'));

删除方法

  sessionStorage.removeItem('key');
    localStorage.removeItem('key');

删除所有

 sessionStorage.clear();
    localStorage.clear();

在vue-cli中使用本地储存

第一种方式

以 localStorage为例, 在main.js添加

    Vue.prototype.bengdi = window.localStorage

使用

    const info = {
        name: "Lee",
        age: 20,
        id: "001",
      };
      // 使用
    this.bengdi.setItem("kkk",JSON.stringify(info));

第二种方式

1. 创建一个单独的文件,封装localstorage的方法

let storage = {
	//设置的方法
	    set:(name,value) =>{
	        localStorage.setItem(name,JSON.stringify(value))
	    },
	//获取的方法
	    get : (name) =>{
	        return JSON.parse( localStorage.getItem(name))
	    },
	//删除的方法
	    removes:(name) =>{
	        localStorage.removeItem(name)
	    }
}

export default storage

2. 直接在组件中按需引用

import storage from "./assets/js/storage"
//直接使用封装好的方法
storage.set(名称,数据)