前端关于cookies ， sessionStorage 和localStorage 的区别及使用

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据 - 通常经过加密
cookie数据始终在同源的http请求中携带，即使不需要，也会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

存储大小：
cookie数据大小不能超过4K
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有效时间：
localStorage:存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
sessionStorage:数据在当前浏览器窗口关闭后自动删除
cookie：设置的cookie过期时间前一直有效，即使窗口和浏览器关闭

用法

 localstorage 和 sessionstorage

首先要判断浏览器是否支持 localStorage / sessionStorage
比如判断 localStorage

if (window.localStorage) {
    alert('浏览支持 localStorage');
} else {
    alert('浏览暂不支持 localStorage');
}

localStorage 和 sessionStorage 都具有相同的操作方法，例如 setItem()、getItem() 和 removeItem() 等

储存数据
用途: 将 value 存储到 key 字段
用法: setItem( key, value)
代码示例

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

注: 如果需要储存数组或对象的话, 可以用JSON格式传入

取出数据
用途: 获取指定 key 本地存储的值
用法: getItem(key)
代码示例

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

修改数据
用途: 修改指定 key 本地存储的值
用法: setItem(key)
代码示例

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

删除数据
用途: 删除指定 key 本地存储的值
用法: removeItem(key)
代码示例

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

清除数据
用途: 清除所有本地存储的数据
用法: clear()
代码示例

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

cookie

储存数据

window.document.cookie = 'key=val';

取出数据

document.cookie

example:

// 设置 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()};`;
}

 

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

 

// 清除Cookie
clearCookie() {
    this.setCookie('', '', -1);
}