客户端数据存储cookie、localStoeage、sessionStorage（小记）

一、数据存储分为客户端存储和服务端存储

1、而对于客户端存储，在html5以前只能通过cookie来实现；html 5以后增加了web存储（实际保存本地）的功能

 

（1）对于web存储有两个标准：

a、File API 标准: 支持该标准的浏览器能够计算机硬盘的其他文件中读取数据

b、IndexDB 标准: 支持该标准的浏览器内含有一个完整的，微型的数据库引擎

 

（2）分类：

a、本地存储（localStorage）:长期保存网站数据，站内任何页面都可以访问该数据

设置数据：localStorage.setItem(键"，保存的数据);

读取数据：localStorage.getItem(键");

删除数据：localStorage.removeItem(键");

清除网站在本地保存的数据：localStorage.clear();

 

b、会话数据（sessionStorage）:临时保存保存针对一个窗口的数据，窗口关闭之后就会被浏览器删除

设置数据：sessionStorage.setItem(键"，保存的数据);

读取数据：sessionStorage.getItem(键");

删除数据：sessionStorage.removeItem(键");

清除网站在本地保存的会话数据：sessionStorage.clear();

注意：

• • 没有web服务器则不能使用web存储：否则会报错，这是不同浏览器对web存储的支持程度不同造成的。
  • 另外，设置数据时要保证键名的唯一性，否则很容易发生命名冲突;
  • 这两者在保存数据时，所有数据都会被保存为文本字符串，对于读取如数值或日期等数据时，需要手动转换数据类型；对于对象，可以通过JSON.stringify()将对象连同其数据保存为文本形式，而通过JSON.parse()把文本转换为对象
  • 此外，两者存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

c、cookie :生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

三者共同点：都保存在客户端，而且同源

 

（3）比较：

a、cookie:

优点：方便,与服务器端通信

缺点：必须处理过期数据； 存放数据大小为4K左右 ，有个数限制（各浏览器不同），一般不能超过20个；每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题；Cookie需要程序员自己封装，源生的Cookie接口不友好；

b、localStorage：用于保存访客将来还能看到的数据

c、sessionStorage： 保存那些从一个页面传递给下一个页面的数据

 

（4） 关系：

• 不同浏览器无法共享localStorage或sessionStorage中的信息。
• 相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是无法共享sessionStorage的信息。
• cookie在浏览器和服务器端来回传递数据，而localStorage和sessionStorage不会自动把数据发送给服务器，仅会保存在本地。cookie会在浏览器请求头或者ajax请求头中发送cookie内容。