javascript浏览器端（客户端）存储数据

在web页面开发时候经常需要在用户的浏览器端保存一些数据，使得下次不用和后台服务器进行交换或是为了一些易用性。比如用户点击了某个checkbox，下次我们希望用户打开该页面该checkbox仍然是上次关闭时候的状态

 

1、http cookies

http cookies就不用多介绍了

示例代码如下：

getCookieValue();
function getCookieValue() {
	var cookieLength = document.cookie.length;
	var cookieName = "cookieName="
	if (cookieLength > cookieName.length) {
		var startPosi = document.cookie.indexOf(cookieName);
		if (startPosi >= 0) {
			var endPosi = document.cookie.indexOf(";", startPosi);
			if(endPosi < 0) {
				endPosi = document.cookie.length;
			} 
			var cookieValue = document.cookie.substring(startPosi + cookieName.length, endPosi);
			alert(cookieValue);
		}
	}
} 

function change() {
	document.cookie="cookieName=cookieValue";
}

从上可以看出，写cookie相当简单document.cookie="cookieName=cookieValue";就ok啦。

其中cookieName为cookie的名字，cookieValue为cookie的值。

 

读cookie相对有些麻烦，需要先将起始位置定位到cookieName，

结束位置定位到cookieName之后的第一个;（分号），因为键值对以分号分隔。

然后取得其中的字符串即为cookieName=cookieValue

 

从上可以看出对于一些字符像分号需要转义存入，否则会出错，更多详细见

http://hi.baidu.com/noirwinter/blog/item/920f52af3d4201fafbed503f.html

 

2、Web Storage

Web Storage是目前得到支持最广泛的HTML5本地存储规范：IE 8+、FF 3.5+、Safari 4+、Chrome 4+、Opera 10.5+，以及iPhone 2+和Android 2+都已经支持Web Storage。

要判断你的浏览器是否支持Web Storage，可以使用

function supports_html5_storage() {
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch (e) {
        return false;
    }
}

 

关于web storage的使用，示例代码如下：

getAutoSaveValue();
function getAutoSaveValue() {  
    try {  
    	if (localStorage["autoSave"] != null && localStorage["autoSave"] != "") {
    		alert(localStorage["autoSave"]);
    	}
		return true;
//        return 'localStorage' in window && window['localStorage'] !== null;  
    } catch (e) {
        return false;  
    }  
} 

function change() {
	localStorage.setItem("autoSave", "1");
}

其中函数getAutoSaveValue为获取保存的值，可以看出其调用方法非常简单

直接localStorage["autoSave"]即可，autoSave为保存的变量名

 

其他存储方法如Web SQL Database 、IndexedDB 见

参考：http://www.iteye.com/magazines/62-html5-local-storage

评论

1 楼 hubenshan 2011-10-17  

好东西！值得研究学习！