理解与使用JS的 localStorage与sessionStorage

在前端开发中，尽量少用cookie，原因：

1.cookie限制大小，约4k左右，不适合存储业务数据，尤其是数据量较大的值
2.cookie会每次随http请求一起发送，浪费宽带

在移动开发中尽量用localstroage，优点：

1.存储数据量大，localStorage拓展了cookie的4K限制
2.会随http请求一起发送，localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

缺点：

1.在浏览器的隐私模式下不能读取
2.本质是在读写文件，写入数据量大的话会卡（FF是将localstorage写入内存中的）
3.不能被爬虫读取
4.localStorage是公共资源，如果你的产品域名下有很多应用共享这份资源会有风险

localStorage与sessionStroage区别:

1.localStroage是将信息存储在硬件设备中的，关闭浏览器或网页也不会消失；
2.sessionStroage的有效期只是网页在浏览器打开到关闭的时间段

安全性的考虑：

需要注意的是，不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。使用它们的时候，需要时刻注意是否有代码存在 XSS 注入的风险。因为只要打开控制台，你就随意修改它们的值，也就是说如果你的网站中有 XSS 的风险，它们就能对你的 localStorage 肆意妄为。所以千万不要用它们存储你系统中的敏感数据。

一、localstorage三种设置方法（增）

// 方法1
window.localStorage.name1 = 'code1';
// 方法2
window.localStorage["name2"] = "code2";
// 方法3
window.localStorage.setItem("name3", "code3");

浏览器查看

二、localStorage的读取方法（查）

// 方法1
window.localStorage.name1; // code1
// 方法2
window.localStorage["name2"]; // code2
// 方法3
window.localStorage.getItem("name3"); // code3

浏览器查看

三、localStorage的删除（删）

// 将localStorage的所有内容清除
window.localStorage.clear();;

// 将localStorage中的某个键值对删除

storage.removeItem("name");

三、localStorage的注意事项

一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式，这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串

{
  if (!window.localStorage) {
    alert("浏览器支持localstorage");
  } else {
    var storage = window.localStorage;
    var data = {
      name: 'code.net.cn',
      sex: 'man',
      hobby: 'program'
    };
    var d = JSON.stringify(data);
    storage.setItem("data", d);
    console.log(storage.data);
  }
}

读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法

{
  var storage = window.localStorage;
  var data = {
    name: 'code.net.cn',
    sex: 'man',
    hobby: 'program'
  };
  var d = JSON.stringify(data);
  storage.setItem("data", d);
  //将JSON字符串转换成为JSON对象输出
  var json = storage.getItem("data");
  var jsonObj = JSON.parse(json);
  console.log(typeof jsonObj);
}

四、sessionStorage 储存方式

let name = "code.net.cn"

// 方法1
window.sessionStorage.setItem('name3', name);
//方法2
window.sessionStorage['name3'] = name;

五、sessionStorage 读取方式

// 方法1
window.sessionStorage.getItem('name');
// 方法2
window.sessionStorage["name"]

六、sessionStorage存储Json对象

{
    let userEntity = {
      name: 'code.net.cn',
      skill: 'web'
    };

    // 存储值：将对象转换为Json字符串
    sessionStorage.setItem('user', JSON.stringify(userEntity));

    // 取值时：把获取到的Json字符串转换回对象
    let userJsonStr = sessionStorage.getItem('user');
    userEntity = JSON.parse(userJsonStr);
    console.log(userEntity.name); // => 'code.net.cn'
  }

七、vue-ls

Vue plugin for work with local storage, session storage and memory storage from Vue context
Vue插件用于从Vue上下文中处理本地存储、会话存储和内存存储。

vue-ls官网

// npm 安装
npm install vue-ls --save

// yarn 安装
yarn add vue-ls

import Storage from 'vue-ls';

options = {
  namespace: 'vuejs__', // key prefix
  name: 'ls', // name variable Vue.[ls] or this.[$ls],
  storage: 'local', // storage name session, local, memory
};

Vue.use(Storage, options);

//or
//Vue.use(Storage);

new Vue({
  el: '#app',
  mounted: function () {
    Vue.ls.set('foo', 'boo');
    //Set expire for item
    Vue.ls.set('foo', 'boo', 60 * 60 * 1000); //expiry 1 hour
    Vue.ls.get('foo');
    Vue.ls.get('boo', 10); //if not set boo returned default 10

    let callback = (val, oldVal, uri) => {
      console.log('localStorage change', val);
    }

    Vue.ls.on('foo', callback) //watch change foo key and triggered callback
    Vue.ls.off('foo', callback) //unwatch

    Vue.ls.remove('foo');
  }
});