H5本地存储

Web Storage

Web Storage是什么

在H4中可以使用cookies在客户端保存用户信息，但是cookies存储永久数据存在以下几个问题：

• 大小：cookies的大小被限制在4kb。
• 带宽：cookies是随HTTP事务一起被发送的，因此会浪费一部分发送cookies时使用的带宽。
• 复杂性：要正确操纵cookies是很难的。

在这种情况下，H5新增了一种在客户端本地保存数据的功能，就是Web Storage。
Web Storage又分为两种：

• sessionStorage
  将数据保存在sessionStorage中。session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。
• localStorage
  将数据保存在客户端本地的硬件设备（通常指硬盘，也可以是其他硬件设备）中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

这两者的区别在于sessionStorage是临时保存，而localStorage是永久保存。
示例网页：

  
Web Storage 示例
  
  
  
  
  
  

js部分代码：

//sessionStorage示例
function saveStorage(id){  
    var target = document.getElementById(id);  
    var str = target.value;  
    sessionStorage.setItem("message",str);  
}  
function loadStorage(id){  
    var target = document.getElementById(id);  
    var msg = sessionStorage.getItem("message");  
    target.innerHTML = msg;  
}  
//localStorage示例 
function saveStorage(id){  
    var target = document.getElementById(id);  
    var str = target.value;  
    localStorage.setItem("message",str);  
}  
function loadStorage(id){  
    var target = document.getElementById(id);  
    var msg = localStorage.getItem("message");  
    target.innerHTML = msg;  
}

数据是按浏览器分别进行的，也就是说，如果打开别的浏览器，是读取不到当前浏览器中保存的数据。
读写数据基本方法：

• sessionStorage
  保存数据：sessionStorage.setItem(key,value);
  读取数据：sessionStorage.getItem(key);
• localStorage
  保存数据：localStorage.setItem(key,value);
  读取数据：localStorage.getItem(key);

保存时不允许重复保存相同的键名。保存后可以修改键值，但不允许修改键名，只能重新取键名，然后再保存键值。

简单Web留言本

如果要保存的数据量比较大，用上边的方法会非常麻烦。
先让我们看一个留言本的示例。使用一个多行文本框来输入数据，点击按钮时将文本框中的数据保存到localStorage中。表单下边放一个p元素用来显示保存的数据。
保存数据时，将文本框的内容作为键值，保存时的日期和时间作为键名来保存，计算机中对于日期和时间的值是以时间戳（1970年1月1日凌晨12点后经过的秒数）的形式进行管理的，所以保存时不可能存在重复的键名。

简单Web留言本

JS部分代码：

function saveStorage(id){
    var data = document.getElementById(id).value;
    var time = new Date().getTime();
    localStorage.setItem(time,data);
    alert("数据已保存。");
    loadStorage('msg');
}
function loadStorage(id){
    var result = '';
    for(var i = 0;i < localStorage.length;i++){
        var key = localStorage.key(i);
        var value = localStorage.getItem(key);
        var date = new Date();
        date.setTime(key);
        var datestr = date.toGMTString();
        result += '';
    }
    result += '
' + value + '
' + datestr + '
';
    var target = document.getElementById(id);
    target.innerHTML = result;
}
function clearStorage(){
    localStorage.clear();
    alert("全部数据被清除。");
    loadStorage('msg');
}

作为简易数据库来使用

如果想要将Web Storage作为数据库来利用的话，有几个问题必须要考虑。首先，在数据库中，大多数表都分为几列，怎样对列来进行管理呢？然后，怎样对数据进行检索呢？如果能解决这些问题，就可以将Web Storage当做数据库来使用了。
我们来看一个客户信息管理页面的例子。客户的联系信息分为姓名、E-mail地址、电话号码、备注，把它们保存在localStorage中。如果输入客户的姓名并进行检索，可以获取这个客户端所有联系信息。

使用Web Storage来做简易数据库示例

    
姓名:

    
EMAIL:

    
电话号码:

    
备注:

    

        

        

    


检索:
        

JS部分代码：

function saveStorage(){
    var data = new Object;
    data.name = document.getElementById('name').value;
    data.email = document.getElementById('email').value;
    data.tel = document.getElementById('tel').value;
    data.memo = document.getElementById('memo').value;
    var str = JSON.stringify(data);
    localStorage.setItem(data.name,str);
    alert("数据已保存。");
}
function findStorage(id){
    var find = document.getElementById('find').value;
    var str = localStorage.getItem(find);
    var data =  JSON.parse(str);
    var result = "姓名: " + data.name + '
';
    result += "EMAIL: " + data.email + '
';
    result += "电话号码: " + data.tel  + '
';
    result += "备注: " + data.memo + '
';
    var target = document.getElementById(id);
    target.innerHTML = result;
}