客户端存储方法cookie、sessionStorage和localStorage的区别

cookie、sessionStorage和localStorage的区别

平时前端开发中用到最多的是cookie、sessionStorage、localStorage

存储时效来说：

• cookie可以手动设置失效期，默认为会话级
• sessionStorage的存储时长是会话级
• localStorage的存储时长是永久，除非用户手动利用浏览器的工具删除

访问的局限性：

• cookie可以设置路径path，所有他要比另外两个多了一层访问限制
• localStorage和sessionStorage的访问限制是文档源级别，即协议、主机名和端口
• 还要注意的是，cookie可以通过设置domain属性值，可以不同二级域名下共享cookie，而Storage不可以，比如http://image.baidu.com的cookie http://map.baidu.com是可以访问的，前提是Cookie的domain设置为".http://baidu.com"，而Storage是不可以的

存储大小限制：

• cookie适合存储少量数据，他的大小限制是个数进行限制，每个浏览器的限制数量不同
• Storage的可以存储数据的量较大，此外他是通过占用空间大小来做限制的，每个浏览器的实现也是不同的，大家可以看这篇文章来进一进步了解Web Storage Support Test

操作方法：

• cookie是作为document的属性存在，并没有提供标准的方法来直接操作cookie
• Storage提供了setItem()和getItem()还有removeItem()方法，操作方便不易出错

其他：

• cookie在发送http请求时，会将本地的cookie作为http头部信息传递给服务器
• cookie可以由服务器通过http来设定

cookie由哪些部分组成？
大家一般都是用已有的库来操作cookie，很少有人利用原生方法直接操作cookie，所以cookie究竟由哪些部分也会被人忽视。
除了基础的键值对外，cookie还有下面的属性：

• Expires ：cookie最长有效期
• Max-Age：在 cookie 失效之前需要经过的秒数。（当Expires和Max-Age同时存在时，文档中给出的是已Max-Age为准，可是我自己用Chrome实验的结果是取二者中最长有效期的值）
• Domain：指定 cookie 可以送达的主机名。
• Path：指定一个 URL 路径，这个路径必须出现在要请求的资源的路径中才可以发送 Cookie 首部
• Secure：一个带有安全属性的 cookie 只有在请求使用SSL和HTTPS协议的时候才会被发送到服务器。
• HttpOnly:设置了 HttpOnly 属性的 cookie 不能使用 JavaScript 经由 Document.cookie 属性、XMLHttpRequest 和 Request APIs 进行访问，以防范跨站脚本攻击（XSS）。

session级存储中，cookie和sessionStorage有哪些区别？

• sessionStorage的会话基于标签，即标签关闭则会话终止，而cookie基于浏览器进程。
• sessionStorage的访问必须基于会话继承和延续，即只有在当前标签下或当前标签打开的标签下可以访问sessionStorage中的数据，而cookie是可以跨标签进行访问的。

提示：sessionStorage和localStorage只能存储字符串类型的数据，如果setItem()方法传入的数据不是字符串的话，会自动转换为字符串类型再进行存储。所以在存储之前应该使用JSON.stringfy()方法先进行一步安全转换字符串，取值时再用JSON.parse()方法再转换一次。