HTML5 网页存储 Web Storage

HTML5 网页存储 Web Storage

一、认识Web Storage

Web Storage是一种将少量数据存储在客户端（client）磁盘的技术。只要支持WebStorage API规格的浏览器，网页设计者都可以使用JavaScript来操作它，我们先了解一下Web Storage。

Web Storage的容量由客户端浏览器决定，通常1MB~5MB。

Web Storage纯粹运行客户端，不会每次网页请求连带发送给服务端。

Web Storage以一组key-value对应保存数据。

Web Storage提供两种方式将数据保存在客户端：一种是localStorage，一种是sessionStorage，两者的差异在于申明周期和有效范围。

表一 Web Storage类型的差异

Web Storage类型	生命周期	有效范围
localStorage	执行删除命令时才会消失	同一网站的网页可以跨窗口和分页
sessionStorage	浏览器窗口或分页（tab）关闭就会消失	仅对当前浏览器窗口或分页有效

检测浏览器是否支持Web Storage，语法如下：

if(typeof(Storage)=="undefined"){
	alert("您的浏览器不支持Web Storage");
}
else{
	//localStorage和sessionStorage程序代码
}

注意：IE和Firefox测试时需要把文件上传到服务器或者localhost才能运行。建议测试时使用Google Chrome浏览器。

二、具体学习

1、访问localStorage

相同网站是指：协议、主机（domain与ip）、传输端口（port）都必须相同。

WebStorage只允许存储字符串数据，有以下3种访问localStorage的方法，前面的window可以不写

• Storage对象的setItem和getItem方法（key："userdata"，value："Hello World"）
  • 存储：window.localStorage.setItem(key,value);
  • 读取：var v = window.localStorage.getItem(key);

• 数组索引
  • 存储：window.localStorage[key] = value;
  • 读取：var v = window.localStorage[key];

• 属性
  • 存储：window.localStorage.key = value;
  • 读取：var v = window.localStorage.key;

请输入你的姓名：



存储到localStorage
从localStorage读取数据

二、删除localStorage

要想删除某一条localStorage数据，可以调用removeItem方法或者delete属性进行删除。

window.localStorage.removeItem("userdata");

delete window.localStorage.userdata;

delete.window.localStorage["userdata"];

要想删除全部的localStorage数据，可以使用clear()方法。

localStorage.clear();

请输入你的姓名：



存储到localStorage
从localStorage读取数据
清除localStorage数据

三、访问sessionStorage

• 存储
  • window.sessionStorage.setItem(key,value);
  • window.sessionStorage [key] = [value];
  • window.sessionStorage.key = value;
• 读取
  • var v = window.sessionStorage.getItem(key);
  • var v = window.sessionStorage [key];
  • var v = window.sessionStorage.key;
• 清除
  • window.sessionStorage.removeItem(key);
  • delete window.sessionStorage.key;
  • delete window.sessionStorage [key];
  • //全部清除
  • sessionStorage.clear();

登录
注销

请输入你的姓名：提交

注：JavaScript里的运算符“+”不仅可以数字相加还可以字符串相加。例如"123"+456="123456"

上例中localStorage.counter++;如果改成localStorage.counter = localStorage.counter +1;就会出现”11111......“

JavaScript将字符串转换成为数字可以用Number()方法，localStorage.counter  = Number(localStorage.counter )+1;