认识Web Storage
Web Storage是一种将少量数据存储在客户端(Client)磁盘的技术。只要支持WebStorage API规格的浏览器,网页设计者都可以使用JavaScript来操作它,在网页没有Web Storage之前,其实已有在客户端存储少量数据的功能,称为Cookie,两者有一些不同和相同之处。
- 存储大小不同:Cookie只允许每个网站在客户端存储4KB的数据,而在HTML5中,Web Storage的容量由浏览器绝对,一般为1MB~5MB
- 安全性不同:Web Storage运行于客户端,不会出现Cookie值给服务器端使得安全性降低
- 都以一组key-value对应保存数据:Cookies是以一组key-value对应的组合保存数据,Web Storage也是同样方式
Web Storage提供两种方式将数据保存在客户端:一种是localStorage,另一种是sessionStorage,两者主要差异在于生命周期以及有效范围,参考如下表格。
Web Storage类型 | 生命周期 | 有效范围 |
localStorage | 执行删除命令才会消失 | 同一网站的网页可以跨窗口和分页 |
sessionStorage | 浏览器窗口或分页(tab)关闭就会消失 | 仅对当前浏览器窗口或分页有效 |
检测浏览器是否支持Web Storage
if(typeof(Storage)=="undefined")
{
alert("您的浏览器不支持Web Storage")
}
else
{
//localStorage和sessionStorage程序代码
}
目前Internet Explorer 8+、Firefox、Opera、Chrome和Safari都支持Web Storage。需要注意的是,IE和FireFox测试时需要把文件上传到服务器或localhost才能运行。建议测试时使用Google Chrome浏览器。
访问localStorage的方法
存储使用setItem方法,其格式如下:
window.localStorage.setItem(key,value);
我们指定一个localStorage变量user,并且指定它的值为“Hello World!”,可以这样写:
window.localStorage.setItem("userdata","Hello World!");
读取user数据时,则使用getItem方法,格式如下:
window.localStorage.getItem(key);
例如:
var valuel = window.localStorage.getItem("userdata");
数组索引存储语法:
window.localStorage["userdata"]="Hello World";
数组读取语法:
var value = window.localStorage["userdata"];
属性存储语法:
window.localStorage.userdata="Hello World!";
属性读取语法:
var value1 = window.localStorage.userdata;
下面进行实际操作,建议使用Chrome浏览器进行浏览。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Storage Test</title>
<link rel="stylesheet" type="text/css" href="color.css">
<script type="text/javascript">
function onLoad()
{
if(typeof(Storage)=="undefined")
{
alert("您的浏览器不支持Web Storage")
}
else
{
btn_save.addEventListener("click",saveToLocalStorage);
btn_load.addEventListener("click",loadFromLocalStorage);
}
}
function saveToLocalStorage() {
localStorage.username = inputname.value;
}
function loadFromLocalStorage() {
show_LocalStorage.innerHTML = localStorage.username+" Hello!Welcome to my website!";
}
</script>
</head>
<body>
<body onload="onLoad()"> <!--调用onLoad方法-->
<img src="images/welcome.jpg"><br/>
请输入你的姓名:<input type="text" id="inputname" value=""><br/>
<div id="show_LocalStorage"></div><br/>
<button id="btn_save">存储到LocalStorage</button>
<button id="btn_load">从LocalStorage读取数据</button>
</body>
</body>
</html>
下图是运行结果,先输入姓名,点击存储到“LocalStorage”按钮时,数据就会被存储,再单击“从LocalStorage读取数据”按钮时,就会将名字显示出来。
删除LocalStorage
要删除某一条localStorage数据,可以调用removeItem方法或者delete属性进行删除,如下:
window.localStorage.removeItem("userdata");
delete window.localStorage.userdata;
delete window.localStorage["userdata"];
localStorage.clear();//删除localStorage全部数据
下面我为之前的范例增加一个“清除localStorage数据”的按钮,以达到我们的需求,我们只需增添部分代码即可。
btn_save.addEventListener("click",saveToLocalStorage);
btn_load.addEventListener("click",loadFromLocalStorage);
btn_clear.addEventListener("click",clearLocalStorage);//清除localStorage命令
function clearLocalStorage() {
localStorage.clear();
show_LocalStorage.innerHTML = localStorage.username;
}//清除数据方法
<button id="btn_save">存储到LocalStorage</button>
<button id="btn_load">从LocalStorage读取数据</button>
<button id="btn_clear">清除LocalStorage数据</button><!--新增清除数据按钮-->
运行结果如下,点击“清除LocalStorage数据”按钮后会出现undefined字样则表示清除完成。
访问SessionStorage
存储
window.sessionStorage.setItem("userdata","Hello World!");
window.sessionStorage["userdata"]="Hello World!";
window.sessionStorage.userdata="Hello World!";
读取
var value1 = window.sessionStorage.getItem("userdata");
var value1 = window.sessionStorage["userdata"];
var value1 = window.sessionStorage.userdata;
清除
window.sessonStorage.removeItem("userdata");
delete window.sessionStorage.userdata;
delete window.sessionStorage["userdata"];
sessionStorage.clear();//全部清除
相关实例练习会在下一篇文章中继续学习...