离线数据存储

页面中可能会有这种需求，一个文本框，刷新或者浏览器重启之后，里面的内容仍然保留着。传统的cookie因为其容量有限，难以满足要求。考虑到现代浏览器（非IE）一般都是支持html5的，可以利用本地存储的方法实现

         localStorage.setItem('key','Hello World');

         var value = localStorage.getItem('key');

IE早期的版本不支持这种方式，但是可以通过另外一种方式来实现：

首先设置一个html元素的style属性：

通过javascript控制

View Code

//设值
var ds = document.getElementById("dataStore");

ds.setAttribute("val",this.value);

ds.save("BookInfo");





//取值：

var ds = document.getElementById("dataStore");

ds.load("BookInfo");

tt.value=ds.getAttribute("val");

上面的存储方式可以再每个域中存储100k数据

下面模拟一下新浪微博发微博的文本框（每次内容更新，但是未提交的时候，都会保存在浏览器上，下次打开该浏览器的时候，内容依然会显示在文本框里）：

<!DOCTYPE HTML>

<html lang="en">

<head>

<meta charset="GBK">

<title>IE本地数据存储</title>

</head>

<body>



<textarea id="tt" name="" rows="20" cols="100"></textarea>

<div id="dataStore"></div>

<script type="text/javascript">

//取值

              (function(){

var tt = document.getElementById("tt"),

                         ds = document.getElementById("dataStore"),

                         value = '';

try{

                         value = localStorage.getItem('key');                   

                     }catch(error){

                         ds.load("BookInfo");

                         value = ds.getAttribute("val");

                     }

                     tt.value = value;

               })();

</script>



<script type="text/javascript">

//设值    

              (function(){

var tt = document.getElementById("tt"),

                     ds = document.getElementById("dataStore");

                  tt.onchange = function(){

try{

                         localStorage.setItem('key',this.value);

                     }catch(e){

                         ds.setAttribute("key",this.value);              

                         ds.save("BookInfo");

                     }                

                  }            

              })();            

</script>

</body>

</html>