简述HTML本地存储

  本地存储，即在用户浏览器中将数据保存在本地，HTML5之前主要是Cookie，HTML5问世后，又出现了四种本地存储方式：LocalStorage、SessionStorage、IndexedDB、WebSql，鉴于后两者使用场景不多，因此本文主要简述其余三种。（仅做笔记，并非详细教程）
  一、 Cookie
  HTTP是一种无状态协议，在连接关闭后无法记录用户的信息，所以有了Cookie，它就相当于一张超市的积分卡，可以保存客户的消费信息，当用户下次登录系统时，不必再做繁琐的身份验证。
  cookie 是由服务器端生成的，发送给User-Agent（用户代理），浏览器会将cookie的key/value 保存到一个文本文件中，在下次请求的时候再发送给服务器。
  cookie的主要内容包括：名字、值、过期时间、路径和域。路径与域一起构成cookie的作用范围。
  格式：Set-Cookie: "name=value;domain=.baidu.com;path=/;expires=Sat, 11 Jun 2016 11:29:42 GMT;HttpOnly;secure"
  其包含属性如下：
  name: 一个唯一确定的cookie名称。通常来讲cookie的名称是不区分大小写的
  value: 存储在cookie中的字符串值。最好为cookie的name和value进行url编码
  domain: cookie对于哪个域是有效的。所有向该域发送的请求中都会包含这个cookie信息。这个值可以包含子域(如：yq.aliyun.com)，也可以不包含它(如：.aliyun.com，则对于aliyun.com的所有子域都有效).
  path: 表示这个cookie影响到的路径，浏览器跟会根据这项配置，像指定域中匹配的路径发送cookie。
  expires: 失效时间，表示cookie何时应该被删除的时间戳(也就是，何时应该停止向服务器发送这个cookie)。如果不设置这个时间戳，浏览器会在页面关闭时即将删除所有cookie；不过也可以自己设置删除时间。这个值是GMT时间格式，如果客户端和服务器端时间不一致，使用expires就会存在偏差。
  max-age: 与expires作用相同，用来告诉浏览器此cookie多久过期（单位是秒），而不是一个固定的时间点。正常情况下，max-age的优先级高于expires。
  HttpOnly: 告知浏览器不允许通过脚本document.cookie去更改这个值，同样这个值在document.cookie中也不可见。但在http请求张仍然会携带这个cookie。注意这个值虽然在脚本中不可获取，但仍然在浏览器安装目录中以文件形式存在。这项设置通常在服务器端设置。
  secure: 安全标志，指定后，只有在使用SSL链接时候才能发送到服务器，如果是http链接则不会传递该信息。就算设置了secure 属性也并不代表他人不能看到你机器本地保存的 cookie 信息，所以不要把重要信息放cookie就对了服务器端设置
  Cookie的限制：
  1. Cookie只是一段文本，所以它只能保存字符串。
  2. 浏览器对它有大小（4K）、个数（每个站点20个；总数300个）有限制。
  3. Cookie的内容是明文保存的，有些浏览器提供界面修改，所以不适合保存重要的或者涉及隐私的内容。
  二、 WebStorage（LocalStorage、SessionStorage）
  1、 存储方式：localStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。true值会转换为"true")。
   2、同源策略限制：若想在不同页面之间对同一个localStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。(IE8和9存储数据仅基于同一主机名，忽略协议（HTTP和HTTPS）和端口号的要求)
  3 、只在本地存储：localStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效。
  5、存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。
  6、 同浏览器共享：localStorage的数据可以在同一个浏览器的不同标签页的同源页面之间共享
  三、 三者的异同
  1、生命周期
  localStorage生命周期为永久有效
  sessionStorage生命周期为当标签或者窗口关闭的时候
  cookie若不设置时间，则表示这个cookie的生命周期为浏览器会话期间，关闭浏览器窗口，cookie就会消失（会话Cookie）
  2、localStorage和session的共享性
  不同的浏览器无法共享localStorage或sessionStorage中的信息。
  localStorage和Cookie在所有的同源窗口中是共享的
  sessionStorage在不同的浏览器窗口中不共享，即使是同一个页面
  3、 共同点
  都是保存在浏览器端，并且是同源的（URL的协议、端口、主机名是相同的，只要有一个不同就属于不同源）
  四、手动简单封装Cookie

/**
 * 设置Cookie
 */
function setCookie(name,value,expires){
    var date = new Date()
    date.setDate(date.getDate() + expires)
    //为了防止泄露，最好编码
    document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + "; PATH=/; EXPIRES=" + date
}
/**
 * 获取Cookie
 */
function getCookie(name){
    var reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)")  //使用正则表达式匹配
    var arr = document.cookie.match(reg)
    return decodeURIComponent(arr[2])   //解码后显示
}
/**
 * 删除Cookie
 */
function removeCookie(name){
    setCookie(name,"")  //让Cookie立即失效
}