使用 getItem 方法或使用 sessionStorage 对象或 localStorage 对象的自定义属性值读取数据，使用 setItem 方法或使用 sessionStorage 对象或 localStorage 对象的自定义属性值保存数据，虽然这种一对一的数据读写方法使用起来比较方便，但是在实际使用过程中用处并不是很大，因为如果要保存的数据量比较大，那么使用这种方法会非常麻烦。下面来看一下如何利用web storage 来保存和读取大量数据。

　　这里来看一个简单 web 留言本的示例。使用一个多行文本框来输入数据，单击按钮时将文本框中的数据保存到 localStorage 中，在表单下部放置一个 p 元素来显示保存后的数据。

　　只保存文本框中的内容，并不能知道该内容是什么时候写好的，所以在保存该内容的同时，也要保存当前日期和时间，并将日期和时间一并显示在 p 元素中。

　　在利用 web storage 保存数据时，数据必须是 “键名/键值”这个格式，所以将文本框的内容作为键值，保存时的日期和时间作为键名进行保存，计算机中的时间是以时间戳( 1970年1月1日凌晨12点后经过的秒数 ) 的形式进行管理的，所以保存时不会存在重复的键名。

　　下面是显示页面的HTML 代码部分。在该页面中，除了输入数据用的文本框与显示数据用的 p 元素之外，还放置了追加按钮和初始化按钮，单击追加按钮来保存数据，单击初始化按钮来清除全部数据。

1 2 3 4 
5 

 

　　下面来看一下script 脚本文件。现在这个文件里有3 个供单击按钮时调用的函数，分别是 saveStorage 、loadStorage 和 clearStorage 。

　　1，saveStorage 函数；

　　　　这个函数比较简单，使用 new Date().getTime() 语句得到了当前的日期和时间的时间戳，然后调用 localStorage.setItem 方法得到的时间戳作为键名，并将文本框中的数据作为键值进行保存。保存完毕后，重新调用脚本中的 loadStorage 函数在页面上显示保存后的数据。

function saveStorage(){    var timeval = new Date().getTime();    var keyname = document.getElementById("textarea").value;    localStorage.setItem(keyname,timeval);    alert("数据以保存");    loadStorage();}

 

　　2，loadStorage 函数；

　　　　这个函数取得保存后的所有数据，然后以表格的形式进行显示。在取得全部数据的时候，需要使用到 localStorage 的两个比较重要的属性。

　　　　2.1 localStorage.length  ：所有保存在 localStorage 中的数据的条数。

　　　　2.2 localStorage.key（index） ：将想要得到的数据的索引号作为 index 参数传入，可以得到在 localStorage 中与这个索引号对应的数据。比如想得到第 6 条数据，传入 index 为 5 （index 是从 0 开始计算的）

　　先用 localStorage.length 属性获取保存数据的条数，然后做一个循环，在循环内使用一个变量，该变量从 0 开始作为 index 参数传入localStorage.key（index ）属性，每次循环时该变量加 1。通过这种方法，取得保存在 localStorage 中的所有数据。

function loadStorage(){    var msg = document.getElementById("msg");    var result = "
     
     
      ";    for(var i=0;i
";    }    result += "
"+datetime+"
";    msg.innerHTML = result;}

 

　　3，clearStorage 函数

　　将localStorage 中保存的数据全部清除。在这个函数中只有一句语句 localStorage.clear()  在调用 localStorage 的 clear 方法后所有保存在 localStorage 中的数据都会被清除。

function clearStorage(){    localStorage.clear();    alert("数据已被清除");    loadStorage();}

 

　　该示例在浏览器中的运行效果如下