目录
一、常用方式
2.4 使用
三、sessionStorage 和 localStorage 使用
3.1 localStorage 的作用
3.2 sessionStorage 和 localStorage 的选择
3.3 使用方式
四、indexDB使用
4.1 indexDB的作用
4.2 indexDB的使用
一、常用方式
JS 常见的存储方式有 cookie、sessionStorage、localStorage、indexDB，先通过表格学习四者的区别：
| 特性 | cookie | localStorage | sessionStorage | indexDB |
| 数据生命周期 | 一般由服务器生成，然后客户端存储。 除非被清理，否则一直存在。但cookie存在过期时间，过期了就无法使用 |
除非被清理，否则一直存在 | 页面关闭就清理 | 除非被清理，否则一致存在 |
| 数据存储大小 | 4K | 5M | 5M | 无限 |
| 与服务器端通信 | 每次都会携带在header中，消耗网络带宽。不建议存储过多数据。 | 不参与 | 不参与 | 不参与 |
| 是否可设置过期 | 是 | 否 | 否 | 否 |
从上表可以得到，cookie 不建议用于存储数据，若大量数据需求可以使用 sessionStorage 或 localStorage，cookie 一般用于用户登录时间验证。
二、cookie 使用
2.1 cookie 的作用
除非用户手动删除浏览器 cookie 以及 cookie 过期的情况，用户如果在某网站登录过一次，下次访问这个网站，用户不需要输入用户名和密码就可以进入网站。
2.2 cookie的安全隐患
由于 cookie 在以纯文本的形式在浏览器和服务器之间传递，在通信时可以被恶意用户获取，恶意用户获取了 cookie 之后，只要在 cookie 的有效时间内重新发给服务器，就拥有了这个合法用户的操作权限，即无需验证直接登录，并做出查看用户数据、操作用户账号等危险操作。
2.3 如何保证 cookie 的安全
2.3.1 cookie 的有效期不要设置太长，合适即可
合理设置 cookie 的有效时间，能够避免用户在泄露 cookie 后，被恶意用户频繁使用
2.3.2 服务器端设置 HttpOnly 属性为 true
可以防止 js 读取 cookie 信息，有效防御 XSS 攻击。
2.3.3 设置复杂的cookie， 并加密
1）cookie 的 key 使用uuid，随机生成
2）cookie 的 value 使用复杂组合，如 用户名+当前时间+cookie有效时间+随机数，复杂的明文能提高解密的难度
3）可以对 cookie 进行 MD5 加密，后 base64 编码
2.3.4 使用https协议，并设置 security属性
设置security属性为true，则只能在协议为 HTTPS 的请求中携带 cookie
2.3.5 使用 token 验证
用户在使用 cookie 的同时，可以结合 token 机制进行双重验证。
流程如下：
- 用户通过用户密码登录
- 服务器验证用户登录成功后，签发一个 token，并发送回客户端
- 客户端收到 token 后把它存储到 localStorage 中，并在之后的请求中都要带上这个 token
- 服务器收到请求后，不仅仅需要验证 cookie 是否有效和过期，还要验证 token 是否正确
2.4 使用
通过 document.cookie 存入和取出 cookie
取出 cookie
function SetCookie (name, value){ //设置名称为name,值为value的Cookievar expdate = new Date(); //初始化时间expdate.setTime(expdate.getTime() + 30 * 60 * 1000); // 有效时间为 30 分document.cookie = name+"="+value+";expires="+expdate.toGMTString()+";path=/";//即document.cookie= name+"="+value+";path=/"; //时间默认为当前会话可以不要，但路径要填写，因为JS的默认路径是当前页，//如果不填，此cookie只在当前页面生效！
}获取 cookie
function getCookie(c_name){//判断document.cookie对象里面是否存有cookieif (document.cookie.length>0){c_start=document.cookie.indexOf(c_name + "=")//如果document.cookie对象里面有cookie则查找是否有指定的cookie，如果有则返回指定的cookie值，如果没有则返回空字符串if (c_start!=-1){ c_start=c_start + c_name.length+1 c_end=document.cookie.indexOf(";",c_start)if (c_end==-1) c_end=document.cookie.lengthreturn unescape(document.cookie.substring(c_start,c_end))} }return ""
}
三、sessionStorage 和 localStorage 使用
3.1 localStorage 的作用
当一个数据基本不变，若用户每次使用这个数据时都要重新从服务器重新拿这个数据，无疑会发送很多无意义的请求，同时降低了服务器的渲染速度（若界面渲染要依靠请求的数据）。
最好的方式就是将这个数据存储在本地，这样用户就无需重复请求一样的数据。
3.2 sessionStorage 和 localStorage 的选择
| 特性 | sessionStorage | localStorage |
| 生命周期 | 用户关闭窗口就被清理 | 需要用户手动清理 |
| 大小 | 5M | 5M |
| 使用场景 | 适用于一些首次进入界面，必须要与服务器交互的信息存储 | 适用于界面持久化，基本不变动的数据 |
3.3 使用方式
// sessionStorage 存入
sessionStorage.setItem("session-item", '1111');
// sessionStorage 取出
sessionStorage.getItem("session-item");// localStorage 存入
localStorage.setItem("local-item", '2222');
// localStorage 取出
localStorage.getItem("local-item");
四、indexDB使用
4.1 indexDB的作用
IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。
4.2 indexDB的使用
转载： 浏览器数据库 IndexedDB 入门教程