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

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

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

1、http cookies

http cookies就不用多介绍了

示例代码如下：

getCookieValue();function getCookieValue() {var cookieLength = document.cookie.length;var cookieName = "cookieName="if (cookieLength &gt; cookieName.length) {var startPosi = document.cookie.indexOf(cookieName);if (startPosi &gt;= 0) {var endPosi = document.cookie.indexOf(";", startPosi);if(endPosi &lt; 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 好东西！值得研究学习！

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

热点推荐