浏览器的四种本地存储方式-cookie,localStorage,sessionStorage,IndexedDB

1.总结

浏览器的本地存储方式有以下三种：

• cookie：服务器为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。

• Web storage API

  获取window.sessionStorage和window.localStorage

  • localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
  • sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

• IndexedDB

  浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。

2.cookie

cookie：服务器为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。

cookie的具体实现过程：

1. 当用户访问web服务器后，web服务器会获取用户的状态并且返回一些数据（cookie）给浏览器，浏览器会自动储存这些数据（cookie)。
2. 当用户再次访问web服务器，浏览器会把cookie放到请求报文中发送给web服务器，web服务器就会获取到了用户的状态。
3. 基于这次用户的状态方便用户进行其他业务的访问，并且web服务器可以设置浏览器保存cookie的时间，cookie是有域名的概念，只有访问同一个域名的时候才会把之前相同域名返回的cookie携带给该web服务器。

关键点：

• web通讯一般基于HTTP协议，HTTP是无状态协议。
• Cookie技术是用来保持web访问状态，Cookie技术通过在请求和响应报文中添加Cookie数据来保存客户端的状态信息
• 服务器可以设置cookie的有效期，浏览器会自动清除过期的cookie。
• cookie有域名的概念，只有访问同一个域名，才会把之前相同域名返回的cookie携带给该服务器。

2.1 设置cookie

内置的Response类提供的set_cookie()方法。

属性	说明
key	cookie的键（名称）
value	cookie的值
max_age	cookie被保存的时间数，单位为秒。
expires	具体的过期时间，一个datetime对象或UNIX时间戳
path	限制cookie只在给定的路径可用，默认为整个域名下路径都可用
domain	设置cookie可用的域名，默认是当前域名，子域名需要利用通配符domain=.当前域名
secure	如果设为True，只有通过HTTPS才可以用
httponly	如果设为True，进制客户端JavaScript获取cookie

2.2 cookie的有效期

默认情况下，Cookie 的生命周期就是浏览器的会话周期，即用户关闭浏览器后，Cookie 就会失效。

1. 设置关键字实参max_age，表示过了多少秒之后过期

2. expires参数代表过期时间，是绝对是件

2.3 JS操作cookie

• document.cookie

  获取得到cookie字符串，cookie都是键值对形式，得到的字符串为key=value形式，多个键值对之间用分号（;）拼接

2.3.1 设置cookie

• 直接设置

  document.cookie="name=value;expires=GMT_String";
  

• 函数形式

  给cookie赋值name,value,days,所对应的含义是名，值，过期时间(相对时间)。
  注意绝对时间是格林威治时间，使用toGMTString()方法将Date对象转换为格林威治时间。

  function setcookie(name,value,days){
     // Date对象 
  	var d= new Date();
  	// days是相对时间，加到当前时间上
  	d.setTime(d.getTime()+(days*24*60*60*1000));
      // 转化为格林威治时间
  	var expires = d.toGMTString();
  	document.cookie = name+"="+value+";expires="+expires;
              }
  
  

2.3.2 删除cookie

删除cookie就是将cookie的有效时间设置为0、负数或过去的时间。删除cokie时可以不指定cookie的值。

function delCookie(name){  //删除cookie
	document.cookie = name+"=;expires="+(new Date(0)).toGMTString();
}

2.3.3 获取cookie

function getCookie(name){
    var sname = name + "=";
    //获取cookie存储字符串数组
    var carr = document.cookie.split(";");  
    for(var i=0; i<carr.length; i++) {
		// trim() 移除首尾空白字符 
        var c = carr[i].trim();
        if (c.indexOf(name) == 0) { 
        	return c.substring(name.length,c.length); 
        }
    }
    return "";
}

3. Web storage API

Web Storage 又叫浏览器端数据储存机制。是HTML5新增的Storage 接口，用于脚本在浏览器保存数据。包括两个对象window.sessionStorage和window.localStorage。

• 属性：Storage.length (window.localStorage.length)

• 方法：

  • Storage.setItem(name,key) ：设置值
  • Storage.getItem(name)：获取
  • Storage.removeItem(name)：删除
  • Storage.clear()：删除所有值
  • Storage.key()：获取键值

• 区别

  • localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
  • sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

4. IndexedDB

参考链接：http://www.ruanyifeng.com/blog/2018/07/indexeddb.html

浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。

5.共同点和区别

共同点

都是保存在浏览器端，且同源的。

区别

1. 与服务端通信：cookie 始终在同源的 http 请求中携带，影响请求性能。而其他的不参与服务器通信。

2. 存储大小

   • cookie 数据大小不能超过 4k。
   • sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。
   • indexDB理论上有无限存储大小

3. 有期时间

   • cookie 可设置过期时间，默认为浏览器关闭则失效。

   • sessionStorage 数据在当前浏览器窗口关闭后自动删除。

   • localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

   • indexDB 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

4. 作用域不同：

   • sessionStorage 只在同一个窗口共享。在不同的浏览器窗口中不共享，即使是同域名。
   • cookie可以通过domain属性设置可访问的域名，domain下的所有子域名都可共享
   • localStorage，indexDB 仅在设置下的同域名共享，不受窗口影响。

6. 使用原则

• 没有大量数据存储需求，可以使用 localStorage 和 sessionStorage 。对于不怎么改变的数据尽量使用 localStorage 存储，否则可以用 sessionStorage 存储。
• 大量数据存储本地，可以使用indexDB进行存储（网页游戏）。
• 有一些平台不支持indexDB，例如微信小游戏等平台，此时需要本地存储大量数据的话，一般会用node的fs模块进行文件管理操作，创建本地文件进行数据储存，来实现indexDB的功能。且微信小游戏提供了相应的api支持这种方式操作的。