三种本地存储方式

cookie

工作

当网页发送http请求时，浏览器会先检查是否有相应的cookie,有则自动添加在request header 中的cookie字段中，这不需要我们手动操作，浏览器会自动帮我们做的，因为这个特点，就关系到我们存储数据，要把合适的数据存储到cookie中. 存储在cookie中的数据，每次都会被浏览器自动放在http请求中，如果这些数据并不是每次请求都需要发送给服务端的数据，浏览器自动处理无疑增加了网络开销；如果这些数据是每个请求都会用到的（一般常见的认证信息）, 浏览器自动设置不需要我们去重复添加。所以对于每次请求都需要携带的信息就适合放在cookie中

特征

1.不同的浏览器存放cookie的位置不一样

2. cookie的存储是以域名形式区分，不同域名存储的cookie是独立的

3. 我们可以设置cookie生效的域（当前设置cookies所在域的子域），也就是说，我们可以操作的cookie是当前作用域以及当前作用域下的所有子域

4. 一个域名下存放的cookie的个数是有限制的，不同浏览器存放的个数不一样，一般为20个

5. 每个cookie存放的内容大小也是有限制的，不同浏览器的存放大小不一样，一般为4KB 6. cookie也可以设置过期时间，默认是会话结束的时候，当时间到期自动销毁，

设置

客户端设置

document.cookie = '名字=值'
document.cookie = 'username=xyf;domain=baidu.com' 并设置的生效域

注意：客户端可以设置cookie的下列选项 expires、domain、path、secure(条件：只有在https协议中，客户端设置secure类型的cookie才能成功)，但是无法设置HttpOnly选项

服务端设置

客户端请求资源，会发送一个请求，服务端都会返回response,而response header中有一个set-cookie,是服务端专门用来设置cookie

Set-Cookie 消息头是一个字符串
Set-Cookie: value[; expires=date][;domain=domain][; path=path][; secure]

# 注意：一个set-Cookie 只可以设置一个cookie,若需要多个，就添加多个set-Cookie。

操作

读取

我们通过document.cookie 来获取当前网页下的cookie,会得到字符串形式的值（只获取到了HttpOnly类型的cookie）,格式是一个分号+空格的形式串联起来，如："PHPSESSID=web1~7vuuikub4l84htufahfa8qg3pa; _ga=GA1.2.2010238201.1583292769; _gid=GA1.2.1518817545.1583292770"

修改

修改一个cookie,只需要重新赋值，旧的值会被新的覆盖，但是需要在path.domain 要与旧的cookie保持一致，否者不会修改旧值，而是添加了一个新的cookie

删除

把cookie的过期时间设置成已经过去的时间，要把path/domain保持跟原来一样就可以了。

document.cookie = '名称=值;expires' + GMT格式的日期字符串

function setCookie (name, value, expireDay) {
    let exdate = new Date()
    exdate.setDate(exdate.getDate() + expireDay)
    document.cookie = name + '=' + escape(value) + (!expireDay) ? '' : +exdate.toGMTString())
}
setCookie('userName', 'xyf', 30)

# 注意： expires是http/。0中的，在新的http/1.1协议中expires中已由max-age选项替代，两者都是限制cookie的有效时间。expires的值是一个时间点，max-age的值是一个以秒为单位时间段的。 max-age d的值有三种情况：负数（有效期session）、0(删除cookie)、正数（有效期为创建时间+max-age）

cookie的属性

domain

domain指定lcookie将要被发送至哪个或者哪些域中，默认情况下domain会被设置为改cookie页面所在的域名，所以当给相同域名发送请求的时候cookie会被发送至服务器

浏览器会把domain的值与请求的域名做一个尾部比较，并将匹配的cookie发送至服务器

localStorage

特点

1. 生命周期：持久化的本地存储，除非手动删除数据，否者不会过期

2. 存储的信息是在统一域中共享的 3. 本页操作（新增、修改、删除）localStrong的时候，本页不会触发storage事件，但是别的页面会触发storage 4. 大小据说是5M 5. locaStorage本质上是对字符串的读取,如果存储太多会消耗内存空间，会导致页面变卡 6. locaStorage受同源策略限制

操作

设置

# localStorage.setItem('username', 'xyf')

获取

# localStorage.getItem('username') 或者 localStorage.key(0)

删除

# localStorage.removeItem('username') 或者 localStorage.clear()

sessionStorage

特点

用于本地存储一个会话中的数据，这些数据只有在同一个会话中才能访问并且会话结束后数据也被销毁，因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的，大概的意思是只要浏览器窗口没有关闭，即使刷新页面或进入同源的另一个页面数据依然存在，关闭窗口后，sessionStorae被销毁，或者在新窗口打开同源的另一个页面，也是没有的

三者的区别

相同点

都是存储在客户端的

不同点

1. localStorage 只要子啊相同协议、主机名、端口下，就能读取/修改同一份localStorage数据

2. sessionStorage 毕localStorage更严谨一些，除了协议名、主机名、端口外，还要求在同一窗口下

3. localStorage是永久存储，除非手动删除

4. sessStorage 是当会话结束自动销毁的

5.cookie的数据会在每一次发送请求的时候，同时发送给服务器而localStorage和sessionStorage不会

前端常用本地存储