十二、html5中本地存储

Web Storage存储机制是对html4中的cookie存储机制的改善，由于cookie机制有很多缺点，html5不再使用它，转而使用改良后的Web Storage存储机制。本地数据库是html5中新增的功能，使用它可以在客户端建立数据库，原本必须保存的在服务器上的数据可以保存在客户端本地，这样大大减轻了服务器的负担。
html4cookie存在的问题：
大小：cookie的大小限制在4kb；

带宽：cookie是随http事务一起被发送的，因此会浪费一部分发送cookie时使用的带宽；

复杂性：要正确地操纵cookie是很困难的。

一、Web Storage分为sessionStorage和localStorage两种。

1、sessionStorag：将数据保存在session对象中，所谓session，是指用户在浏览某个网站时，从进入网站到关闭浏览器这段时间，也就是用户浏览这个网站所花费的时间，session对象用来保存这段时间内所要求保存的任何数据。（临时保存）

（1）保存数据的方法：

sessionStorage.setItem('key','value')或sessionStorage.key='value'

（2）读取数据的方法：
变量=sessionStorage.getItem('key')或变量=sessionStorage.key

2、localStrorage：将数据保存在客户端本地的硬件设备（通常指硬盘，也可以是其他硬件设备）中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问该网站时仍然可以继续使用。（永久保存）

（1）保存数据的方法：

localStorage.setItem('key','value')或localStorage.key='value'

（2）读取数据的方法：

变量=localStorage.getItem('key')或变量=localStorage.key

浏览器支持情况：firefox 3.6以上、chrome 6以上、safari 5以上、opera 10.50以上、Ie8以上版本都支持。

代码示例如下：

<section>
    <h1>web storage示例</h1>
    <p id="msg"></p>
    <input type="text" id="input">
    <input type="button" value="保存数据" onclick="saveStorage('input')" >
    <input type="button" value="读取数据" onclick="loadStorage('msg')" >
</section>

<script type="text/javascript">
    function saveStorage(id){
        var target=document.getElementById(id);
        var str=target.value;
        sessionStorage.setItem('message',str);   //或者sessionStorage.message=str
    }
    function loadStorage(id){
        var target=document.getElementById(id);
        var msg=sessionStorage.message;    //获取message值或者sessionStorage.getItem('message',str)
                target.innerHTML=msg;         //输入框赋值innerHTML区分大小写
    }
</script>

代码运行结果：

注意在保存数据时不允许保存相同的键名，保存后可以修改键值，但不可以修改键名。

 

三、作为简易数据库来使用

1、saveStorage函数中的流程：

（1）从各输入文本框中获取数据

（2）创建对象，将获取的数据作为对象的属性进行保存。

（3）将对象转换成JSON格式的文本数据。

（4）将文本数据保存在localStorage中。

为了将数据保存在一个对象中，使用new Object语句创建了一个对象，将各种数据保存在该对象的各个属性中，然后，为了将对象转换成json格式的文本数据，使用json对象的stringfy方法，使用方法如下：var str=JSON.stringfy(data);