前端基础整理 | 本地存储 Cookie、SessionStorage、LocalStorage

本地存储除了标题所述的几种，还包括IndexDB，相当于在客户端建立一个数据库，和上面那些相差有点大，所以先不提。

上述的几种存储结构都是基于键值对存储的。

1、Cookie

简介

Cookie 是浏览器访问服务器后，服务器传给浏览器的一段数据。浏览器需要保存这段数据。此后每次浏览器访问该服务器，都必须带上这段数据。
也就是说，Cookie不宜存储大量数据，会增大HTTP请求体积。

用途

Cookie最经常的用途是，存放SessionId，由于HTTP是无状态的，所以服务器需要维护一个Session用来记录客户状态的。

以登陆为例子:
(1) 客户端发送密码和用户名
(2) 服务端判断正确后，发送的HTTP Response Header中带有Set-Cookie: sessionid=10086(sessionId)，

Set-Cookie

(3) 客户端接收后，以后发送HTTP Request 时 Header带有 Cookie:sessionid=10086。

Cookie

JS操作

通常，创建cookie只需要设置 值、过期时间、所在路径(默认情况下，cookie 属于当前页面)，最简单的cookie就完成了：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

删除cookie的话，只需要把过期时间设为过去的时间，并且无需指定cookie的值

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

读取cookie的话，可以直接用一个变量去赋值

let x = document.cookie

附上菜鸟教程几个函数：

function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i

Cookie的参数

• path：表示 cookie 影响到的路径，匹配该路径才发送这个 cookie。
• expires 和 maxAge：告诉浏览器 cookie 时候过期，maxAge 是 cookie 多久后过期的相对时间。不设置这两个选项时会产生 session cookie，session cookie 是 transient 的，当用户关闭浏览器时，就被清除。一般用来保存 session 的 session_id。
• secure：当 secure 值为 true 时，cookie 在 HTTP 中是无效，在 HTTPS 中才有效
• httpOnly：浏览器不允许脚本操作 document.cookie 去更改 cookie。一般情况下都应该设置这个为 true，这样可以避免被 xss 攻击拿到 cookie。

2、SessionStorage 和 LocalStorage

简介

1. 只要有效期和作用域，浏览器每次访问的时候都会将Storage载入到内存里。
2. localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
3. sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。
4. localStorage也受同源策略的限制。(不同源的不允许读取)
5. localStorage和sessionStorage都具有相同的操作方法，如setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

JS操作

// 获取
let value = window.localStorage.getItem('item-name')
// 设置
window.localStorage.setItem('item-name', 'content')
// 删除
window.localStorage.removeItem('item-name')
// 清空
window.localStorage.clear()

3、三者对比

来自知乎 @似水流年 的总结图片