HTML问题

请描述cookie、sessionStorage和localStorage的区别？

相关知识：

• sessionStorage、localStorage 和 Cookie 这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。
  
• 区别在于前两者属于 HTML5 WebStorage，创建它们的目的便于客户端存储数据。而 cookie 是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）。cookie 数据始终在同源（协议、主机、端口相同）的 http 请求中携带（即使不需要），会在浏览器和服务器间来回传递。
  
• 存储大小：cookie 数据大小不能超过 4 k。sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5 M 或更大。
  
• 有期时间：
  localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。
  sessionStorage 数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话。
  cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。
  
• 作用域：
  sessionStorage 只在同源的同窗口（或标签页）中共享数据，也就是只在当前会话中共享。
  localStorage 在所有同源窗口中都是共享的。
  cookie 在所有同源窗口中都是共享的。

解答：

• 浏览器端常用的存储技术是 cookie、localStorage 和 sessionStorage。
  
• cookie 其实最开始是服务器端用于记录用户状态的一种方式，由服务器设置，在客户端存储，然后每次发起同源请求时，发送给服务器端。cookie 最多能存储 4 k 数据，它的生存时间由 expires 属性指定，并且 cookie 只能被同源的页面访问共享。
  
• sessionStorage 是 HTML5 提供的一种浏览器本地存储的方法，它借鉴了服务器端 session 的概念，代表的是一次会话中所保存的数据。它一般能够存储 5 M 或者更大的数据，它在当前窗口关闭后就失效了，并且 sessionStorage 只能被同一个窗口的同源页面所访问共享。
  
• localStorage 也是 HTML5 提供的一种浏览器本地存储的方法，它一般也能够存储 5 M 或者更大的数据。它和 sessionStorage 不同的是，除非手动删除它，否则它不会失效，并且 localStorage 也只能被同源页面所访问共享。
  
• 当我们大量储存数据时，我们可以使用浏览器的 indexDB 这是浏览器提供的一种本地的数据库存储机制。 | | cookie | localStorage | sessionStorage | | —- | —- | —- | —- | | 由谁初始化 | 客户端或服务器，服务器可以使用Set-Cookie请求头。 | 客户端 | 客户端 | | 过期时间 | 手动设置 | 永不过期 | 当前页面关闭时 | | 在当前浏览器会话（browser sessions）中是否保持不变 | 取决于是否设置了过期时间 | 是 | 否 | | 是否随着每个 HTTP 请求发送给服务器 | 是，Cookies 会通过Cookie请求头，自动发送给服务器 | 否 | 否 | | 容量（每个域名） | 4kb | 5MB | 5MB | | 访问权限 | 任意窗口 | 任意窗口 | 当前页面窗口 |