首页 专题 H5案例 前端导航 UI框架

JavaScript学习笔记整理(12):客户端存储

作者:TG 日期: 2016-10-07 阅读: 1876
Web应用允许使用浏览器提供的API实现将数据存储到用户的电脑上。

一、localStorage和sessionStorage

localStorage和sessionStorage这两个属性都代表同一个Storage对象(一个持久化关联数组,数组使用字符串来索引,存储的值都是字符串形式的)。

1.1 存储有效期和作用域
localStorage和sessionStorage的区别在于存储的有效期和作用域的不同。

1.1.1 localStorage
通过localStorage存储的数据是永久性的,除非Web应用刻意删除存储的数据或用户通过设置浏览器设置来删除,否则数据将一直保留在用户的电脑里,永不过期。

localStorage的作用域是限定在文档源(document origin)级别。

同源的文档间共享同样的localStorage数据。

1.1.2 sessionStorage
sessionStorage的作用域同样是限定在文档源中,不过它被限定在窗口中。也就是说,如果同源的文档在不同的浏览器标签页中,那它们互相之间拥有的是各自的sessionStorage数据,无法共享。

注意:基于窗口作用域的sessionStorage指的窗口只是顶级窗口。如果一个浏览器标签页包含多个<iframe>元素,它们包含的文档是同源的,两者之间的sessionStorage是可共享的。

1.2 存储API
我们可以将localStorage和sessionStorage当做普通的JavaScript对象:通过设置属性来存储字符串值,查询该属性来读取该值。

localStorage.user = 'TG';

当然,这两个对象也提供了对应的存储和读取的方法。

localStorage.setItem('user','TG');   //存储一个以“user”的名字存储的数值。


localStorage.getItem('user');  //读取

同样,sessionStorage也有这两个方法。

sessionStorage.setItem('user','TG');

sessiontStorage.getItem('user');

还可以使用removeItem()和clear()方法来删除。

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); //获取该对的值

}

其中的key方法,根据位置(从0开始)获得键值。

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读取。



关注”全栈技术杂货铺“

全栈技术杂货铺