cookies，sessionStorage 和 localSt

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。

cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。

sessionStorage和local Storage不会自动把数据发给服务器，仅在本地保存。
存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
Cookies 用法
import Cookies from 'js-cookie'
Cookies.set('sidebarStatus', 1)
Cookies.get(sidebarStatus)

sessionStorage 的用法:

3.示例子：

3.1 存储数据
3.1.1 采用setItem()方法存储

sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值,定义 testKey这个名字，下面通过名字获取到

3.1.2 通过属性方式存储

sessionStorage['testKey'] = '这是一个测试的value值';//下面通过testKey属性获取存储的数据

3.2 读取数据
3.2.1 通过getItem()方法取值

sessionStorage.getItem('testKey'); // => 返回testKey对应的值，通过testKey获取

3.2.2 通过属性方式取值

sessionStorage['testKey']; // => 这是一个测试的value值,通过testKey属性获取

3.3 存储Json对象
sessionStorage也可存储Json对象：存储时，通过JSON.stringify()将对象转换为文本格式；读取时，通过JSON.parse()将文本转换回对象。

var userEntity = {
    name: 'tom',
    age: 22
};

// 存储值：将对象转换为Json字符串

sessionStorage.setItem('user', JSON.stringify(userEntity));

// 取值时：把获取到的Json字符串转换回对象

var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom

localStorage用法小总结

我首先在开发者工具的Console中，输入了

localStorage.

然后就弹出了一些列宿主（浏览器）提供的localStorage自带的方法，摘录了一些常用的API如下表所示：

img.png

清空localStorage

localStorage.clear()    // undefined    
localStorage            // Storage {length: 0}

读取数据

localStorage.setItem("name","caibin") //存储名字为name值为caibin的变量
localStorage.name = "caibin"; // 等价于上面的命令
localStorage // Storage {name: "caibin", length: 1}

读取数据

localStorage.getItem("name") //caibin,读取保存在localStorage对象里名为name的变量的值
localStorage.name // "caibin"
localStorage.valueOf() //读取存储在localStorage上的所有数据
localStorage.key(0) // 读取第一条数据的变量名(键值)
//遍历并输出localStorage里存储的名字和值
for(var i=0; i<localStorage.length;i++){
    console.log('localStorage里存储的第'+i+'条数据的名字为：'+localStorage.key(i)+',值为：'+localStorage.getItem(localStorage.key(i)));
}

删除某个变量

localStorage.removeItem("name"); //undefined
localStorage // Storage {length: 0} 可以看到之前保存的name变量已经从localStorage里删除了

检查localStorage里是否保存某个变量

// 这些数据都是测试的，是在我当下环境里的，只是demo哦～
localStorage.hasOwnProperty('name') // true
localStorage.hasOwnProperty('sex')  // false

将JSON存储到localStorage里

var students = {
    xiaomin: {
        name: "xiaoming",
        grade: 1
    },
    teemo: {
        name: "teemo",
        grade: 3
    }
}
 
students = JSON.stringify(students);  //将JSON转为字符串存到变量里
console.log(students);
localStorage.setItem("students",students);//将变量存到localStorage里
 
var newStudents = localStorage.getItem("students");
newStudents = JSON.parse(students); //转为JSON
console.log(newStudents); // 打印出原先对象