Web Storage是一种将少量数据存储在客户端(Client)磁盘的技术。只要支持WebStorage API规格的浏览器,网页设计者都可以使用JavaScript来操作它,在网页没有Web Storage之前,其实已有在客户端存储少量数据的功能,称为Cookie,两者有一些不同和相同之处。
Web Storage提供两种方式将数据保存在客户端:一种是localStorage,另一种是sessionStorage,两者主要差异在于生命周期以及有效范围,参考如下表格。
Web Storage类型 | 生命周期 | 有效范围 |
localStorage | 执行删除命令才会消失 | 同一网站的网页可以跨窗口和分页 |
sessionStorage | 浏览器窗口或分页(tab)关闭就会消失 | 仅对当前浏览器窗口或分页有效 |
if(typeof(Storage)=="undefined")
{
alert("您的浏览器不支持Web Storage")
}
else
{
//localStorage和sessionStorage程序代码
}
目前Internet Explorer 8+、Firefox、Opera、Chrome和Safari都支持Web Storage。需要注意的是,IE和FireFox测试时需要把文件上传到服务器或localhost才能运行。建议测试时使用Google Chrome浏览器。
存储使用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浏览器进行浏览。
Web Storage Test
请输入你的姓名:
下图是运行结果,先输入姓名,点击存储到“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;
}//清除数据方法
运行结果如下,点击“清除LocalStorage数据”按钮后会出现undefined字样则表示清除完成。
存储
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();//全部清除
相关实例练习会在下一篇文章中继续学习...