localStorage sessionStorage cookie

介绍

1. localStorage: localStorage 是永久的，localStorage 除非用户主动删除数据，否则数据永远不会消失。存放数据大小为5M左右
2. sessionStorage: sessionStorage 仅在当前会话下有效。sessionStorage 在关闭了浏览器窗口后就会被销毁。存放数据大小为5M左右
3. cookie: 在设置的cookie过期时间之前一直有效。 存放数据大小为4K左右, 有个数限制（一般不能超过20个）

localStorage 和 sessionStorage 用法相同

存储数据

sessionStorage.setItem('key', 'value');
localStorage.setItem('key', 'value');

取数据

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

更改数据

更改数据跟存储数据类似，可直接进行赋值

sessionStorage.setItem('key', 'newVal');
localStorage.setItem('key', 'newVal');

删除指定数据

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

清除所有数据

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

cookie 用法

cookie 没有很好的API，需要自己进行封装

存储数据

//使用window.document.cookie
setCookie(key, val, days) {
    let date = new Date(); // 获取时间
    date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * days);
    // 字符串拼接 Cookie
    window.document.cookie = `${key}=${val};path=/;expires=${date.toGMTString()};`;
}

获取数据

// 获取数据：document.cookie
getCookie() {
    let cookie = document.cookie.split(';');
}

清除数据

其实就是设置cookie的过期时间为-1

clearCookie() {
    this.setCookie('', '', -1);
}