cookie, sessionStorage和localStorage的区别

首先我们在浏览器上查看如图

浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式。

HTML4的本地存储cookie

什么是cookie

cookie是一些数据，存储在浏览器端(电脑的文本文件中)，当web服务器向浏览器发送web页面时，在连接关闭后，服务器不会记录用户的信息。cookie就是早期用于解决‘如何记录客户端的用户信息'

• 当用户访问web页面时，一些信息可以记录在cookie
• 当用户下一次访问该页面时，可以在cookie中读取用户访问记录

cookie的作用是与服务器进行交互

cookie机制

设置cookie时，如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的的关闭而结束，这种cookie简称为会话cookie。如果浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。

Cookie以名/值对的文本形式存储在客户端，当浏览器从服务器上请求web页面时，属于该页面的cookie会被添加到该请求中，服务端通过这种方式来获取用户的信息。

cookie使用

在JS中，通过使用document.cookie属性来创建、读取、及删除cookie

// 设置cookie, 键：username, 值：Jett, 不添加过期时间，默认情况下，cookie 在浏览器关闭时删除
document.cookie = 'username=Jett'
// 添加一个过期时间
document.cookie="password=123456; expires=Thu, 18 Dec 2043 12:00:00 GMT";

// 读取cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value;
let cookies = document.cookie

console.log("cookies:", cookies) // cookies: username=Jett; password=123456

// 修改cookie, 同样的键重复设置会覆盖旧的值
document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

// 删除cookie, 只需要设置exxpires参数为以前的时间即可
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

从上面的代码可以看出，JS操作cookie的api很不友好，这时需要我们自己封装一些方法

/* 设置cookie的值 */
function setCookie(cname,cvalue,exdays)
{
  let d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  let expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

/* 获取cookie的值 */
function getCookie(cname)
{
  let name = cname + "=";
  let ca = document.cookie.split(';');
  for(let i=0; i<ca.length; i++) 
  {
    let c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

存储大小

单个cookie保存的数据不能超过4kb

安全性

针对cookie所存在的攻击：cookie欺骗，cookie捕获；

缺点

• 大小受限
• 用户可以操作(禁用)cookie，使功能受限
• 安全性较低
• 有些状态不可能保存在客户端
• 每次访问都要传送cookie给服务器，浪费带宽

HTML5的本地存储(Web Storage)

Web Storage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点，HTML5不再使用它，转而使用新的API, Web Storage存储机制。本地数据库是HTML5中新增的一个功能，使用它可以在客户端本地建立一个数据库，原本必须保存在服务器端数据库中的一些内容现在可以直接保存在客户端，大大减轻服务器端的负担，同时加快了访问数据的速度

WebStorage两个主要目标：（1）提供一种在cookie之外存储会话数据的路径。（2）提供一种存储大量可以跨会话存在的数据的机制。

具体来说，Web Storage分为两种：

sessionStorage

用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问，并且当会话结束后数据也随之销毁。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间。

localStorage

用于持久化的本地存储，将数据保存在客户端本地的文件系统中，即使浏览器被关闭了，该数据依然存在，下次打开浏览器访问网站时仍然存在。除非主动删除数据，否则数据是永远不会过期的。

存储大小

localStorage和sessionStorage的存储数据大小一般都是：5Mb

存储位置

localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信

存储内容类型

都只能存储字符串类型，对于复杂数据，可以采用JSON格式存取

优点

• 存储空间大：cookie为4kb，而WebStorage为5Mb
• 节省带宽：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样每次请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；
• 安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；
• API更简单，WebStorage提供了一些方法

使用

通过，window.localStorage和window.sessionStorage来获取，提供了以下方法

• setItem (key, value) ——  保存数据，以键值对的方式储存信息
• getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值
• removeItem (key) ——  删除单个数据，根据键值移除对应的信息
• clear () ——  删除所有的数据
• key (index) —— 获取某个索引的key

这里没有什么过期时间的概念，不过我们可以在设置值的时候，存入一个时间戳，然后以后获取的时候通过比较时间戳判断是否过期。因为api比较简单这里就不提供代码了。

cookie 、sessionStorage与localStorage的区别

参考：https://www.cnblogs.com/pengc/p/8714475.html