区分缓存

userData：主要为ie服务，大小写限制

• 优点：存储限制大小，单个文件的大小限制是128KB，一个域名下总共可以保存1024KB的文件，文件个数应该没有限制。在受限站点里，这两个值分别为64KB和640KB

session

• 存储位置：服务器
• 作用：服务器用来记录用户信息
• 工作流程：当用户第一次请求服务器时，服务器会生成一个sessionId来区分不同的用户，并保存在服务器，在响应的时候放在cookie中，当同一个用户再次访问服务器时，在请头上会带sessionID，服务器通过sessionId就能判断用户的状态了。sessionId可以设置失效时间，与cookie关系：sessionId返回依赖
• 缺点：浏览器限制

Cookie（兼容性最好的本地存储）

• 存储位置：客户端
• 优点：兼容性最好，几乎所有的浏览器都支持
• 缺点：大小有限制、而且每次发送请求，请求头会带着Cookie一起发过去，现在基本大多数登录的合法性验证都是cookie验证的。不同浏览器大小不一样
• 特点：默认浏览器关闭时删除，也可以设置过期时间
• 使用场景：存储用户的账户信息（转义后存储），cookie实现自动登录，设置失效时间，到期需重新登录

存储：

sessionStorage.setItem("name", "value");

检索：

document.cookie;//返回一个字符串，包含所有的cookie,如"cookie1=value; cookie2=value; "

//需要切割获取
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 "";
}

删除（设置expires参数为以前的时间）：

document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

openDatabase:

• 存储位置：本地文件
• 优点：就是一个完整的数据库
• 缺点：对不熟悉数据库的前端同学，成本高

localstorage（同个域名下存储）:

• 存储位置：客户端
• 优点：兼容性中等，操作简单，就是key-value形式，几乎现代的浏览器都支持
• 缺点：存在大小限制，IE9、IE10不支持，隐私模式下不可读取、不能被爬虫爬取、localStorage一般只能存5M

1. 只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据(无法跨域)。
2. 理论上是永久存储的，不主动清空的话就不会消失。移动设备上，不太可靠。会因为各种原因被清空（app退出、网络切换、内存不足等）

• 用法（key/value）：

存储：

localStorage.setItem("key", "value");

检索：

localStorage.getItem("key")

删除：

localStorage.removeItem("key");

删除所有数据

localStorage.clear();

SessionStorage：页面关闭失效

• 存储位置：

• 优点：临时存储神器，关闭页面标签自回收，不可以跨页面交互。

• 缺点：不能存储持久化的东西。

• 特点：

1 .页面刷新不会被释放

2.同一个浏览器中，不同的两个标签之间的sessionStorage是不共享的，也就是必须在同一个浏览器的窗口下才生效。
3.浏览器关闭被清除

• 用法（key/value）：

存储：

sessionStorage.setItem("key", "value");

检索：

sessionStorage.getItem("key")

删除：

sessionStorage.removeItem("key");

删除所有数据

sessionStorage.clear();