本地存储

一、本地存储

       本地存储将用户的一些偏好，用户当前的状态等等简单的信息，存储到本地电脑上，再次访问的时候就可以直接调用，客户端存储遵循“同源策略”，不同站点之间的页面是无法互相读取对方存储的数据，而同一站点的不同页面之间是可以互相共享存储的数据，网页可以选择他们存储数据的有效期限

二、实现方式

1.cookie

cookie的涉及初衷是给服务器端脚本用来存储少量数据的，该数据会在每次请求一个相关url时传递到服务器中，不同浏览器对于本地的cookie的数量都有一定的限制，不允许大量的使用cookie，并且每个cookie文件的大小都不能大于4KB；

第一次登录没有记录数据，正常显示，你搜索过的内容会存在本地的cookie中，第二次访问时，http会和cookie一起发送到服务器，然后返回。
不同浏览器对cookie有个数限制： IE8为每个域名50个、火狐50个、poera30个。

判断浏览器是否支持cookie：

if(navigator.cookieEnabled){
	Document.write("你的浏览器支持cookie")
}
else{
	Document.write("请开启cookie功能")
}

创建并设置cookie的过期时间：

方法一：

Document.cookie = "userName = 123&pwd = abc;expires=时间 "

方法二：

function setCookie($name,$value,$day){
	var data = $name+"="+$value; //拼凑数据 变量名=值
	var myData = new Data();
	var mSecond = $day*24*3600*1000;
}

读取cookie变量：

获得cookie字符串

Document.cookie //文档对象的一个属性cookie

2.web存储

web存储：web存储标准描述的api包含localstroage和sessionstroage对象。Web存储更加的安全快速，这些数据不会被保存到服务器上，只是用于用户请求。

web存储又分为localStorage对象和sessionStorage对象

localStorage对象

localStorage对象存储的数据没有时间限制，是永久性的。作用域遵循同源策略即可
储存值
语法规则：localStorage.属性名=值；
读取
localStorage.属性名;
修改
与存储值一样，重新向该属性当中存储新的值即可替换原值

方法：
Setltem(“属性名”,值);存储一个值
Getltem(“属性名”);读取值
Removeltem(“属性名”);删除指定项的值
Clear();全部删除

sessionStorage对象

使用方法和localStorage是完全一样的，他们的区别在于过期时间不同和作用域不同。

Cookie和localStorage只要遵守同源策略就可以，而sessionStorage必须是同源同窗口
localstorage存储的数据是永久性的，除非刻意的去删除，否则数据会一直保留在用户的电脑上永不过期
sessionStorage存储的数据是临时的，当该脚本所在的最顶层的窗口或浏览器关闭以后，数据就会被删除。
localStorage的作用域是限定在文档源级别的，（文档源是通过协议，主机名以及端口三者来确定的）同一文档源之间的不同页面可以共享localStorage数据，可以互相读取，设置覆盖修改。
sessionStorage的作用域也被限制在文档源中，不仅如此sessionStorage的作用域还被限定在窗口中，如果同源的文档渲染在不同的浏览器标签中，他们各自的sessionStorage数据无法共享；一个标签页面中的脚本是无法读取或者覆盖有另一个标签页脚本写入的数据，哪怕这两个标签页渲染的是同一个页面，运行的是同一个脚本也不行

总结：