Fe-interview: [html] 第103天 请描述一下cookies、sessionStorage和localStorage的区别？

[haizhilin2013]

第103天 请描述一下cookies、sessionStorage和localStorage的区别？

210

[xxf1996]

• cookie：存放于浏览器中的数据；常用于会话管理，用户设置，行为跟踪等。在js中可以通过document.cookie来进行设置，获取或删除等操作；不过cookie有许多明显的缺点：
  
  
  
  • cookie的大小限制在4KB；
  
  
  • cookie会伴随http请求一起被发送，会浪费网络带宽
  
  
  • cookie的正确操作比较困难
  
  
• webStorage：H5新增的API，数据存放于客户端本地内存中；sessionStorage和localStorage操作一致，而sessionStorage的有效期限为一次session会话（即一个tab页从打开到关闭之间的时间段），localStorage是没有失效时间的（即永久保存，删除需要手动处理）；

[LinStan]

cookie : 是网站为了对用户身份做标识而存储在本地的数据。

1. 在同源的http请求中会被一同发送，因此会占用网络带宽。
2. 最大大小4KB
3. 以前每个域名支持20个，新版本的增加到50个
4. 生命周期为设置的过期时间，若不设置则到关闭浏览器为止。

localStorage：是HTML5新增的，不会将数据自动发送到服务器，仅存储在本地，并且会永久存储，除非用户主动删除，不然不会过期或者自动清除。

sessionStorage：大部分类同localStorage 除了生命周期持续到当前窗口关闭

后两者在不同浏览器的最大大小不同，因此一般以5M为上限较为安全。

[Konata9]

• cookies:

  历史最悠久的客户端存储手段。由于 HTTP 是无状态的，服务端为了记住用户（如登录后的状态）的状态，会把一个 token 在用户登录后发给客户端。客户端在之后的请求中会带着这个 token 表明自己的身份。cookie 可以在浏览器中查看到，因此不应该存储敏感信息，并且浏览器对 cookie 有大小限制（一般为 5KB 左右），因此也不宜存储过多信息。

  可以通过 document.cookie 访问到 cookie。同一个域名下，cookie 是共享的，即可以作为跨标签共享数据的手段之一。

  可以通过 document.cooke=newCookie 来对 cookie 进行设置。cookie 的值是 key=value 的键值对。同时可以给 cookie 设置相应的过期事件、domain、是否通过 https 来传输。

• sessionStorage / localStorage

  HTML5 中增加的存储手段。两者之间的差别就是 sessionStorage 在网页关闭后就自动销毁了，而 localStorage 则会一直存在直到用户手动清除。sessionStorage 在跨标签页数据共享时会遇到问题（当 a 标签为 target="_blank" 的时候可以使用 sessionStorage 进行数据共享）。localStorage 则没有这个限制。两者都是存储 key=value 的键值对，其中 value 必须是字符串，一般在存储前会通过 JSON.stringify 进行转化。

参考文章: MDN Cookie

[EragonBubble]

Cookies

网站为了对用户身份做标识而存储在本地的数据。在同源的http请求中会被一同发送，因此会占用网络带宽。最大大小4KB。以前每个域名支持20个，新版本的增加到50个。生命周期为设置的过期时间，若不设置则到关闭浏览器为止。

localStorage

HTML5新增的，不会将数据自动发送到服务器，仅存储在本地，并且会永久存储，除非用户主动删除，不然不会过期或者自动清除。

sessionStorage

有效期限为一次session会话（即一个tab页从打开到关闭之间的时间段）。

webStorage在不同浏览器的最大大小不同，因此一般以5M为上限较为安全。

[CtriXin]

特性 | Cookie | localStorage | sessionStorage
-- | -- | -- | --
数据的生命期 | 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 | 除非被清除，否则永久保存 | 仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小 | 4K左右 | 一般为5MB |  
与服务器端通信 | 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 | 仅在客户端（即浏览器）中保存，不参与和服务器的通信 |  
易用性 | 需要程序员自己封装，源生的Cookie接口不友好 | 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 |