sessionstorage过期时间_cookie、localStorage、sessionStorage辨析

作者：奚杰

一、Cookie

什么是cookie

cookie是存储在客户端的一小段文本信息，以key-value的格式保存。

cookie的工作流程

1. 浏览器发送请求。
2. 服务器收到请求后，发送一个包含Set-Cookie头部的响应到浏览器。
3. 浏览器保存cookie，并在之后向该服务器发送的请求中携带cookie头部。
4. 服务器收到含有cookie的请求后返回数据。

如何操作cookie

通过document.cookie可以设置和获取Cookie的值。

cookie的生命周期

cookie可以设置过期时间：

• 如果不设置过期时间，则表示该cookie的生命周期为浏览器会话期间，一旦关闭浏览器窗口，cookie就消失了。
• 如果设置了过期时间，cookie的生命周期就是这个过期时间。
• 过期时间设置为0，代表立即删除该cookie。

cookie的限制

各个浏览器对cookie的大小都有限制，一般为4K。对每个域名所包含的cookie数也有限制，但该值各浏览器并不统一。

二、LocalStorage

什么是localStorage

localStorage是HTML5新加入的特性，用来作为本地存储使用，解决了cookie存储空间不足的问题。

如何操作localStorage

• 保存：localStorage.setItem('key', 'value')。
• 读取：localStorage.getItem('key')。
• 删除：localStorage.removeItem('key')。

localStorage的生命周期

生命周期为永久，除非主动删除数据，否则数据并不会因为浏览器关闭而消失。

localStorage的优点

一般浏览器支持5M大小，拓宽了cookie的大小限制。

localStorage的缺点

有的低版本浏览器还未支持该特性（如IE8以下）。

三、SessionStorage

什么是sessionStorage

sessionStorage是HTML5新加入的特性，用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后将会删除这些数据。

如何操作sessionStorage

• 保存：sessionStorage.setItem('key', 'value')
• 读取：sessionStorage.getItem('key')
• 删除：sessionStorage.removeItem('key')
• 删除所有数据：sessionStorage.clear()

sessionStorage的生命周期

只保存在当前会话期间，保存在sessionStorage里的数据在页面会话结束时会被清除。