HTML5 LocalStorage 本地存储的简单使用教程

在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了。二者用法完全相同,本文来讲讲localStorage的简单使用方法。

localStorage 检测浏览器是否支持

JS检测代码如下

if(window.localStorage){
	alert('This browser supports localStorage');
}else{
	alert('This browser does NOT support localStorage');
}

localStorage 是以键值对的方式存在的,读取、写入、删除操作方法也很简单

localStorage 写入/设置

设置的方式,推荐使用 setItem()

localStorage.username = "老杨";
localStorage["username"] = "老杨";
localStorage.setItem("username", "老杨");

localStorage 读取

读取的方式,推荐使用 getItem()

var username = localStorage["username"];
var username = localStorage.username;
var username= localStorage.getItem("username");

localStorage 删除/清空

删除键值的方式使用 removeItem()

localStorage.removeItem("username");

想要一次性清除所有的键值对,可以使用clear()。

localStorage key()方法

HTML5还提供了一个key()方法,可以在不知道有哪些键值的时候使用,如下:

var storage = window.localStorage;
function showStorage(){
	for(var i=0;i<storage.length;i++){
		//key(i)获得相应的键,再用getItem()方法获得对应的值
		document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
	}
}

需要注意的是,HTML5本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换。

localStorage 兼容

在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误,这时一般在setItem之前,先removeItem()就ok了。

localStorage 监听storage事件

HTML5的本地存储,还提供了一个storage事件,可以对键值对的改变进行监听,使用方法如下:

if(window.addEventListener){
	window.addEventListener("storage", handle_storage, false);
}
else if(window.attachEvent){
	window.attachEvent("onstorage", handle_storage);
}

function handle_storage(e){
	if(!e){
		e = window.event;
	}
	//showStorage();
}