Cookie、 LocalStorage 与 SessionStorage区别与用法

Cookie、 LocalStorage 与 SessionStorage区别与用法

特性	Cookie	LocalStorage	sessionStorage
生命期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下（同一窗口或标签页）有效，关闭页面或浏览器后被清除
大小	4K左右	一般为5MB	一般为5MB
与服务端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信
应用	登录状态，记住密码，用户自定义设置，跟踪分析用户行为	需要长期保存的东西，比如编辑的文字草稿	购物车信息，登录的用户信息

安全性

通常我们会通过cookie来与服务端通信，来保存我们的登录状态，但由于Cookie有其固有的不安全性，所以敏感信息不应该通过Cookie传输。
为了避免跨域脚本 (XSS) 攻击，我们可以设置cookie中的 HttpOnly 属性，这样客户端便不能通过JavaScript的 Document.cookie API 来访问。
有些恶意网站可以设法伪造带有正确 Cookie 的 HTTP 请求，来实现 CSRF 攻击。可以设置SameSite Cookie允许服务器要求某个cookie在跨站请求时不会被发送，从而可以阻止跨站请求伪造攻击（CSRF）。但目前SameSite Cookie还处于实验阶段，并不是所有浏览器都支持。

使用

localStorage和sessionStorage

localStorage和sessionStorage都具有相同的操作方法：

• 读取 localStorage 项 getItem(‘key’)

  localStorage.getItem("key");
  

• 设置 localStorage 项 setItem(‘key’, value)

  localStorage.setItem("key", value);
  

• 删除 localStorage 项 removeItem(‘key’)

  localStorage.removeItem("key");
  

• 移除所有 localStorage 项 clear()

  localStorage.clear();
  

• sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历

  var storage = window.localStorage;
  for (var i=0, len=storage.length; i<len; i++){
      var key = storage.key(i);     
      var value = storage.getItem(key);     
      console.log(key + "=" + value); 
  }
  

cookie

cookie几个属性：

• Expires
  指cookie过期的绝对时间，值为日期对象
  expires默认为设置的expires的当前时间

• Max-Age
  max-age是cookie的有效期,是一个相对时间，值的单位是秒，是相对于cookie创建后多少秒才过期。
  max-age为正数，则表示该cookie会在max-age秒之后自动失效。写到对应的cookie文件中，无论客户关闭了浏览器还是电脑，只要还在max-age秒之前，登录网站时该cookie仍然有效。
  max-age为负数，则表示该cookie仅在本浏览器窗口以及本窗口打开的子窗口内有效，关闭窗口后该cookie即失效。不会被写到cookie文件中。cookie默认的max-age值为-1。
  max-age为0，则表示删除该cookie。cookie机制没有提供删除cookie的方法，因此通过设置该cookie即时失效实现删除cookie的效果。失效的Cookie会被浏览器从cookie文件或者内存中删除。

• domain
  domain指定了哪些主机可以接受Cookie，如果没有设置则为当前主机的域（不包含子域名）。如果指定了Domain，则一般包含子域名。

• path
  path是指cookie存储的目录，默认为当前文件的存储目录。

• secure
  布尔值。指定该cookie只能通过https协议进行传输。

• HttpOnly
  使 JavaScript 的 Document.cookie API无法访问带有 HttpOnly 标记的Cookie

注意点：

• 如果不设置expires或者max-age这个cookie默认是Session的，也就是关闭浏览器该cookie就消失了。

• 如果max-age和expires都存在，则max-age的优先级更高。

• 一个 cookie 既可以是 HttpOnly 的也可以有 Secure 属性。

• 保存中文cookie，则需要对中文进行UTF-8编解码，即通过encodeUriComponent（）和decodeUriComponent（）方。

• cookie的更新，只要将key；path；domain一致，则可以通过改变key对应的value来更新cookie的值。

• cookie只能更新不能删除，如果想要删除一个cookie，则通过更新设置该cookie的max-age=0即可。

• 设置了不同域名下的cookie是不能互相访问，但是子域名是可以访问上级域名的，所以可以将cookie存在顶级域名下。

前端获取cookie：

// 只能获取非HttpOnly标记的Cookie。
document.cookie

设置cookie：

document.cookie = 'atoken=aaa;max-age=10000;domain=test.com;path=/;secure'

原生cookie的操作比较麻烦，我们可以使用js-cookie库来操作：参考