项目实战之本地存储篇

在前端项目开发中，前端的本地存储是必不可少的，今天小编就前端的本地存储在项目中的使用详细的介绍一下。前端本地存储主要有：

cookie
localStorage
sessionStorage
webSQL/indexDB

接下来就这三种前端常用的存储方式进行介绍。
cookie

cookie就是存储在客户端的一小段文本，大小不能超过4kb，在请求接口的时候，cookie会被请求携带着，进而被服务器所读取使用。
打开浏览器控制台，F12>>Application>>Cookies,随便选择一个域，我们可以看到里面有很多cookie，如下所示：
主要属性

Name

cookie的名称

Value

cookie的值,大小最大4Kb

Domain

cookie存储的域名

Path

cookie存储的路径

Size

cookie的大小

Expires/Max-Age

这两个属性涉及到 cookie 的存活时间

Expires 属性指定一个具体的到期时间，到了这个指定的时间之后，浏览器就不再保留这个 cookie ,它的值是 UTC 格式，可以使用 Date.prototype.toUTCString() 格式进行转换。

Max-Age 属性制定了从现在开始 cookie 存在的秒数，比如 60 * 60 （即一小时）。过了这个时间以后，浏览器就不再保留这个 Cookie。

Max-Age的优先级比Expires高，如果两者都不设置，则这个cookie会在浏览器关闭的时候失效。

HttpOnly

如果设置了该属性，意思就是这个cookie不能被JavaScript取到，也就防止了cookie被脚本读取，然后当发起请求的时候，该cookie才会被带上。

Secure

指定浏览器只有在加密协议 HTTPS 下才能发送cookie，不需要设置，当协议是https时，会自动开启。

更多请见：http://www.mark-to-win.com/tutorial/50670.html