cookie
cookie详解
存储cookie是浏览器的功能，浏览器下有一个cookie文件夹专门存放各个域下设置的cookie，cookie是存储在浏览器的纯文本
当网页要发http请求时，浏览器会先检查是否有相应的cookie，有则自动添加在request header中的cookie字段中。这些是浏览器自动帮我们做的，而且每一次http请求浏览器都会自动帮我们做
cookie的格式
document.cookie
原生js获取cookie的方法，得到一个字符串，但这个字符串是有格式的，由键值对key=value构成，键值对之间由一个分号和一个空格隔开。
“key=value; key=value”
cookie属性选项
包括：expires、domain、path、secure、HttpOnly，
在设置任一个cookie时都可以设置相关的这些属性，当然也可以不设置，这时会使用这些属性的默认值。在设置这些属性时，属性之间由一个分号和一个空格隔开。如下：
"key=name; expires=Thu, 25 Feb 2016 04:18:00 GMT;domain=ppsc.sankuai.com; path=/; secure; HttpOnly"
expires
expires选项用来设置“cookie 什么时间内有效”。expires其实是cookie失效日期，expires必须是GMT格式的时间（可以通过new Date().toGMTString()或者new Date().toUTCString()来获得）。
expires的值是一个时间点（cookie失效时刻= expires）; 如expires=Thu, 25 Feb 2016 04:18:00 GMT表示cookie讲在2016年2月25日4:18分之后失效，对于失效的cookie浏览器会清空。如果没有设置该选项，则默认有效期为session，即会话cookie。这种cookie在浏览器关闭后就没有了。
http/1.0协议，cookie被max-age代替，max-age的值是一个以秒为单位时间段（cookie失效时刻= 创建时刻+ max-age）。
domain 和 path
domain是域名，path是路径，两者加起来就构成了 URL，domain和path一起来限制 cookie 能被哪些 URL 访问。
secure
secure选项用来设置cookie只在确保安全的请求中才会发送。当请求是HTTPS或者其他安全协议时，包含secure选项的cookie才能被发送至服务器。
默认情况下，cookie不会带secure选项(即为空)。所以默认情况下，不管是HTTPS协议还是HTTP协议的请求，cookie都会被发送至服务端。但要注意一点，secure选项只是限定了在安全情况下才可以传输给服务端，但并不代表你不能看到这个 cookie。
document.cookie="name=king; secure"
如果想在客户端即网页中通过 js 去设置secure类型的 cookie，必须保证网页是https协议的。在http协议的网页中是无法设置secure类型cookie的。
httpOnly
这个选项用来设置cookie是否能通过js去访问。默认情况下，cookie不会带httpOnly选项(即为空)，所以默认情况下，客户端是可以通过js代码去访问（包括读取、修改、删除等）这个cookie的。当cookie带httpOnly选项时，客户端则无法通过js代码去访问（包括读取、修改、删除等）这个cookie。
在客户端是不能通过js代码去设置一个httpOnly类型的cookie的，这种类型的cookie只能通过服务端来设置。
如何设置cookie
服务端客户端均可设置cookie
服务端
不管你是请求一个资源文件（如 html/js/css/图片），还是发送一个ajax请求，服务端都会返回response。而response header中有一项叫set-cookie，是服务端专门用来设置cookie的。如下图所示，服务端返回的response header中有5个set-cookie字段，每个字段对应一个cookie（注意不能将多个cookie放在一个set-cookie字段中），set-cookie字段的值就是普通的字符串，每个cookie还设置了相关属性选项。
一个set-Cookie字段只能设置一个cookie，当你要想设置多个 cookie，需要添加同样多的set-Cookie字段。
服务端可以设置cookie 的所有选项：expires、domain、path、secure、HttpOnly
客户端设置cookie
js代码实现：
document.cookie="xxx=yyy"
客户端可以设置cookie 的下列选项：expires、domain、path、secure（有条件：只有在https协议的网页中，客户端设置secure类型的 cookie 才能成功），但无法设置HttpOnly选项
js设置多个cookie，一次只能设置一次成功。所以重复执行
document.cookie="key=value"：
document.cookie = "name=Jonh";
document.cookie = "age=12";
document.cookie = "class=111";
修改、删除cookie
修改：
要想修改一个cookie，只需要重新赋值就行，旧的值会被新的值覆盖。但要注意一点，在设置新cookie时，path/domain这几个选项一定要旧cookie 保持一样。否则不会修改旧值，而是添加了一个新的 cookie。
删除：
删除一个cookie也是重新赋值，只要将这个新cookie的expires选项设置为一个过去的时间点就行了。但同样要注意，path/domain/这几个选项一定要旧cookie 保持一样。
cookie 编码
cookie其实是个字符串，但这个字符串中逗号、分号、空格被当做了特殊符号。所以当cookie的 key 和 value 中含有这3个特殊字符时，需要对其进行额外编码，一般会用escape进行编码，读取时用unescape进行解码；
var key = ("name;value");
var value = escape("this is a value contain , and ;");
document.cookie= key + "=" + value + "; expires=Thu, 26 Feb 2116 11:50:25 GMT; domain=sankuai.com; path=/";
一个小例子，页面加载时显示上次保存的信息
function getCookie(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=")
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.length
return unescape(document.cookie.substring(c_start, c_end))
}
}
return ""
}
function setCookie(c_name, value, expiredays) {
var exdate = new Date()
exdate.setDate(exdate.getDate() + expiredays)
document.cookie = c_name + "=" + escape(value) +
((expiredays == null) ? "" : ";expires=" + exdate.toGMTString())
}
function checkCookie() {
username = getCookie('username')
if (username != null && username != "") {
alert('Welcome again ' + username + '!')
}
else {
username = prompt('Please enter your name:', "")
if (username != null && username != "") {
setCookie('username', username, 365)
}
}
}
localStorage sessionStorage
localStorage
方法存储的数据没有时间限制。
localStorage.lastname="Smith";
sessionStorage
方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
sessionStorage.firsrname='king'
H5应用程序缓存
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
Cache Manifest
如需启用应用程序缓存，请在文档的 标签中包含 manifest 属性：
manifest文件
CACHE MANIFEST- 在此标题下列出的文件将在首次下载后进行缓存
NETWORK- 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK- 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
一个完整的manifest文件
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html