前端持久化存储技术总结Cookies/WebStorage/indexDB

前端的存储技术也有不少，cookie、web storage、indexDB等，下面进行更详细的介绍：

Cookie（小型文本文件、小甜饼）

• 定义：
  Cookie是保存在客户机的文本文件（IE保存在本地的一个txt文件中）, 这个文件与特定的 Web 文档关联在一起, 保存了该客户机访问这个Web 文档时的信息, 当客户机再次访问这个 Web 文档时这些信息可供该文档使用。请求服务器时放在http请求头里面（不论是否需要，都会放在请求头里面）
• 主要作用：
  用于解决 “如何记录客户端的用户信息”,用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
  为什么需要cookie？

  HTTP是一种无状态的协议，客户端与服务器建立连接并传输数据，数据传输完成后，连接就会关闭。再次交互数据需要建立新的连接，因此，服务器无法从连接上跟踪会话，也无法知道用户上一次做了什么。如：在网络有时候需要用户登录才进一步操作，用户输入用户名密码登录后，浏览了几个页面，由于HTTP的无状态性，服务器并不知道用户有没有登录。但是有了Cookie，服务器在第一次客户端请求的时候，将cookie保存在客户端，客户端重新请求服务器时会携带cookie（未过期），这样服务器就知道上一次用户做了什么。服务器还会对Cookie信息进行维护，必要时会对Cookie内容进行修改。
  请求头
  GET / HTTP/1.0
  HOST: itbilu.com
  Cookie: UserID=itbilu*

• 实现原理：
  Cookie定义了一些HTTP请求头和HTTP响应头，通过这些HTTP头信息使服务器可以与客户进行状态交互。客户端请求服务器后，如果服务器需要记录用户状态，服务器会在响应信息中包含一个Set-Cookie的响应头，客户端会根据这个响应头存储Cookie信息。再次请求服务器时，客户端会在请求信息中包含一个Cookie请求头，而服务器会根据这个请求头进行用户身份、状态等较验。
• 存储时间：
  Expires属性：设置Cookie的生存期。有两种存储类型的Cookie：会话性与持久性。
  cookie.setmaxage设置为0时，会马上在浏览器上删除指定的cookie
  cookie.setmaxage设置为-1时，代表关闭当前浏览器即失效。

1. 内存式Cookie：
   Expires属性缺省时，为会话性Cookie(session cookie 也称临时cookie)，仅保存在客户端内存中，并在用户关闭当前窗口时失效；由于其存储时间较短，因此也被称为非持久Cookie或会话性Cookie。

   会话：会话（Session）跟踪是Web程序中常用的技术，用来跟踪用户的整个会话。常用的会话跟踪技术是Cookie与Session。Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份。

2. 硬盘式Cookie：
   指定了Expires时间持久性Cookie（Third-party cookie 也称为本地cookie）会保存在用户的硬盘中，直至生存期到或用户直接在网页中单击“注销”等按钮结束会话时才会失效

• 数量、大小限制：
  数量限制：不同的浏览器对同一个域名下的cookie的数量上限有所不同，例如Firefox3.6为150、IE6为50
  大小限制：约为4k
• Cookie组成/结构：
  文件名格式：
  <用户名>@<域名>[数字].txt （例如：elf@sohu[1].txt）

UNIX格式，只有换行(0x0A)没有回车(0x0D)

序号	与cookie相关属性	解释
1	name	Cookie变量名,cookie一旦创建，名字不可修改
2	value	Cookie变量值如果值为Unicode字符，需要为字符编码。如果值为二进制数据，则需要使用BASE64编码
3	path	改cookie能被使用的路径，默认当前路径 / (是一个相对路径，且最后应有 / 结尾)
4	domain/	该Cookie变量所属域，形如csdn.net/、blog.csdn.net/（表示该Cookie变量在该域下，不管访问该域下的哪个目录中的网页，浏览器都会将该Cookie信息附在网页头部信息当中发送给服务端）Cookie 机制并未遵循严格的同源策略，允许一个子域可以设置或获取其父域的 Cookie。虽然这一特性很有用但是也很危险，所以浏览器禁止在 Domain 属性中设置.org、.com 等通用顶级域名、以及在国家及地区顶级域下注册的二级域名
5	Secure	指定是否使用HTTPS安全协议发送Cookie。在网络上传输数据之前先将数据加密。默认为false
6	HTTPOnly	防止客户端脚本通过document.cookie属性访问Cookie，有助于保护Cookie不被跨站脚本攻击窃取或篡改。HTTPOnly的应用仍存在局限性，一些浏览器可以阻止客户端脚本对Cookie的读操作，但允许写操作；此外大多数浏览器仍允许通过XMLHTTP对象读取HTTP响应中的Set-Cookie头
7	maxAge	该Cookie失效的时间，单位秒。是个相对值(比如:3600s),相对的是文档第一次被请求时服务器记录的Request_time(请求时间)。如果为正数，则该Cookie在maxAge秒之后失效。如果为负数，该Cookie为临时Cookie，关闭浏览器即失效，浏览器也不会以任何形式保存该Cookie。如果为0，表示删除该Cookie。默认为–1。在Apache中，max-age是根据Expires的时间来计算出来的max-age = expires- request_time（或者修改时间）
8	expires	一个确切的过期时间(GMT格式)，指定的时间可以是相对文件的最后访问时间(Atime)或者修改时间(MTime),而max-age相对的是文档的请求时间
9	comment	该Cookie的用处说明。浏览器显示Cookie信息的时候显示该说明
10	version	该Cookie使用的版本号。0表示遵循Netscape的Cookie规范，1表示遵循W3C的RFC 2109规范
12	size	此cookie大小
11	*	Cookie记录分隔符（为一个星号* ）

• Cookie遵循同源策略：
  一个cookie用在一个域名及其子域名下,允许一个子域可以设置或获取其父域的 Cookie。详见上面表格中domain属性

Cookies安全相关

secure：标记为 Secure 的 Cookie 只应通过被 HTTPS 协议加密过的请求发送给服务端，因此可以预防 man-in-the-middle 攻击者的攻击。
httpOnly：JavaScript Document.cookie API 无法访问带有 HttpOnly 属性的cookie；此类 Cookie 仅作用于服务器。

1. 会话劫持和XSS（跨域脚本攻击）
   当使用cookie来标记用户授权会话的话，攻击者可能会使用document.cookie来获取信息
2. 跨站请求伪造
   攻击者在不安全的网站里面，利用用户已经登录的其他网站有效cookie，向用户的其他网站发起恶意请求

• JS对Cookie简单使用

//创建及修改Cookie
//设置用户名；过期时间；路径（默认当前页面路径）
document.cookie="username=ZhangSan; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

//读取cookie
var data=document.cookie

//删除Cookie ，设置 expires 参数为以前的时间即可
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
//注：如果您需要查找一个指定 cookie 值，您必须创建一个JavaScript 函数在 
//cookie 字符串中查找 cookie 值。下面是一个示例
function getCookie(cname)
{
   
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) 
  {
   
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

Web storage

web storage是h5的新特性，克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。web storage分为两种，local storage和session storage。

缺点

1、存储在本地且未加密，有安全隐患
2、存储在文本文件中，读取较慢
3、存储格式为字符串，所以数据类型有限制，如果是存储对象需要调用JSON的stringify方法，并且用JSON.parse来解析成对象。
4、大小有限制，不适合存储较大数据
5、浏览器会为每个域分配独立的存储空间，即脚本在域A中是无法访问到域B中的存储空间的&