JavaScript学习笔记整理（12）：客户端存储
localStorage.user = 'TG';
localStorage.setItem('user','TG'); //存储一个以“user”的名字存储的数值。
localStorage.getItem('user'); //读取
sessionStorage.setItem('user','TG');
sessiontStorage.getItem('user');
localStorage.removeItem('user'); //删除名为“user”的数据。
localStorage.clear(); //删除所有存储的数据
sessionStorage.removeItem('user');
sessionStorage.clear();
for(var i=0; i < localStorage.length; i++){
var name = localStorage.key(i); //获取第i对的名字
console.log(localStorage.getItem(name); //获取该对的值
}
localStorage.key(1);
1.3 storage事件
当储存的数据发生变化时，会触发storage事件。我们可以指定这个事件的回调函数。
window.addEventListener("storage",onStorageChange);
回调函数接受一个event对象作为参数。这个event对象的key属性，保存发生变化的键名。
function onStorageChange(e) {
console.log(e.key);
}
除了key属性，event对象的属性还有三个：
oldValue：更新前的值。如果该键为新增加，则这个属性为null。
newValue：更新后的值。如果该键被删除，则这个属性为null。
url：原始触发storage事件的那个网页的网址。
值得特别注意的是，该事件不在导致数据变化的当前页面触发。如果浏览器同时打开一个域名下面的多个页面，当其中的一个页面改变sessionStorage或localStorage的数据时，其他所有页面的storage事件会被触发，而原始页面并不触发storage事件。可以通过这种机制，实现多个窗口之间的通信。所有浏览器之中，只有IE浏览器除外，它会在所有页面触发storage事件。
二、cookie
cookie是指Web浏览器存储的少量数据，每个Cookie的大小一般不能超过4KB。
Cookie保存以下几方面的信息。
Cookie的名字
Cookie的值
到期时间
所属域名（默认是当前域名）
生效的路径（默认是当前网址）
我们可以通过特殊的格式的字符串形式来读写Document对象的cookie属性。
document.cookie //读取当前页面的所有cookie
我们可以通过检查navigator.cookieEnabled属性来检测当前cookie是否启用。若值为true，表示cookie是启用的。
2.1 cookie属性：有效期和作用域
cookie默认的有效期很短暂，它只能持续在Web浏览器的会话期间，一旦用户关闭浏览器，cookie保存的数据就会丢失。
注意：cookie的有效期和sessionStorage的有效期是有区别的：cookie的作用域并不是局限在浏览器的单个窗口中，它的有效期和整个浏览器进程而不是单个浏览器窗口的有效期一致。
cookie的作用域是通过文档源和文档路径来确定的。
2.2 保存cookie
document.cookie属性是可写的，可以通过它为当前网站添加Cookie。
document.cookie = 'user=TG';
Cookie的值必须写成key=value的形式。注意，等号两边不能有空格。另外，写入Cookie的时候，必须对分号、逗号和空格进行转义（它们都不允许作为Cookie的值），这可以用encodeURIComponent方法进行编码，读取时再采用decodeURIComponent方法解码。
但是，document.cookie一次只能写入一个Cookie，而且写入并不是覆盖，而是添加。
document.cookie = 'test1=hello';
document.cookie = 'test2=world';
document.cookie
// test1=hello; test2=world
如果要延长cookie的有效期，就需要设置mav-age属性来指定cookie的有效期（单位是秒）
document.cookie = 'user=TG;max-age=60*60*24'; //将有效期设置为一天
2.3 读取cookie
使用JavaScript表达式来读取cookie属性时，其返回的值是一个字符串，该字符串都是由一系列名/值对组成，不同名/值对之间通过“分号和空格”分开，其内容包含了所有作用在当前文档的cookie。
一般情况下，我们会采用split()方法将cookie值中的名/值对都分离出来。当然，如果之前进行了一系列的编码，就需要先解码再分离。
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 "";
}
2.4 其他属性
除了Cookie本身的内容，还有一些可选的属性也是可以写入的，它们都必须以分号开头。
Set-Cookie: value[; expires=date][; domain=domain][; path=path][; secure]
上面的Set-Cookie字段，用分号分隔多个属性：
（1）value属性
value属性是必需的，它是一个键值对，用于指定Cookie的值。
（2）expires属性
expires属性用于指定Cookie过期时间。它的格式采用Date.toUTCString()的格式。
expires=Thu, 01 Jan 1970 00:00:00 GMT
如果不设置该属性，或者设为null，Cookie只在当前会话（session）有效，浏览器窗口一旦关闭，当前Session结束，该Cookie就会被删除。
浏览器根据本地时间，决定Cookie是否过期，由于本地时间是不精确的，所以没有办法保证Cookie一定会在服务器指定的时间过期。
（3）domain属性
domain属性指定Cookie所在的域名，比如example.com或.example.com（这种写法将对所有子域名生效）、subdomain.example.com。
如果未指定，默认为设定该Cookie的域名。所指定的域名必须是当前发送Cookie的域名的一部分，比如当前访问的域名是example.com，就不能将其设为google.com。只有访问的域名匹配domain属性，Cookie才会发送到服务器。
（4）path属性
path属性用来指定路径，必须是绝对路径（比如/、/mydir），如果未指定，默认为请求该Cookie的网页路径。
只有path属性匹配向服务器发送的路径，Cookie才会发送。这里的匹配不是绝对匹配，而是从根路径开始，只要path属性匹配发送路径的一部分，就可以发送。比如，path属性等于/blog，则发送路径是/blog或者/blogroll，Cookie都会发送。path属性生效的前提是domain属性匹配。
（5）secure
secure属性用来指定Cookie只能在加密协议HTTPS下发送到服务器。
该属性只是一个开关，不需要指定值。如果通信是HTTPS协议，该开关自动打开。
（6）max-age
max-age属性用来指定Cookie有效期，比如60 * 60 * 24 * 365（即一年31536e3秒）。
2.5 cookie的限制
浏览器对Cookie数量的限制，规定不一样。目前，Firefox是每个域名最多设置50个Cookie，而Safari和Chrome没有域名数量的限制。
所有Cookie的累加长度限制为4KB。超过这个长度的Cookie，将被忽略，不会被设置。
由于Cookie可能存在数量限制，有时为了规避限制，可以将cookie设置成下面的形式。
name=a=b&c=d&e=f&g=h
上面代码实际上是设置了一个Cookie，但是这个Cookie内部使用&符号，设置了多部分的内容。因此，读取这个Cookie的时候，就要自行解析，得到多个键值对。这样就规避了cookie的数量限制。
3、同源策略
浏览器的同源政策规定，两个网址只要域名相同和端口相同，就可以共享Cookie。
注意：这里不要求协议相同。也就是说，http://example.com设置的Cookie，可以被https://example.com读取。