html5 存储篇（一）

localStorage 和 sessionStorage

 

   localStorage 与 sessionStorage的相同点：

        (1)、都是用于客户端存储的技术，相对于传统的cookie更有一定的优势，他们相对于cookie 大约 4k 左右的储存量（并且每个网站的设置的cookie数量是有限的，并且各个浏览器的限制数目并不相同），储存量大约有 5M 吧。

        (2)、都以键值对的形式储存数据，具有相似的API。操作起来相似，且容易。

        clear( ) : 删除所有的值。

        getItem( name ) : 根据指定的名字name获取对应的值。

        key( index ) : 获得 index 位置处的值得名字。

        removeItem( name ) : 删除由 name 指定的名值对。

        setItme( name, value ) : 为指定的name设置一个对应的值。

    localStorage 与 sessionStorage的不同点：

        localStorage 一旦设置便会永久的保存在客户端浏览器上，除非手动的删除。

        sessionStorage在这方面如同服务端的session，即关闭浏览器，数据就会自动删除掉。因此在选择这两种储存时，应该考虑具体的应用场景来使用。

    具体使用：

        首先现已下面的代码检测一下您的浏览器是否支持 localStorage 对象。

            <script type="text/javascript">

                 if(typeof window.localStorage == 'undefined') {

                      alert('您的浏览器不支持localStorage！');

                 } else {

                      alert('OK');

                 }

            </script>

       下面我们来具体走一遍API吧，由于他们差不多这里我们将以localStorage为例来说明了。。

            //设置localStorage

            var localStorage = window.localStorage;

             localStorage.setItem("name","Lee");

             localStorage.setItem("age",27);    

        

 

         //删除localStorage

          var localStorage = window.localStorage;

          localStorage.removeItem("name");

        

          

        //获取localStorage中的值         

        var localStorage = window.localStorage;

         console.log(localStorage.getItem("age"));   

       

       //获取localStorage中的键值

        var localStorage = window.localStorage;

        console.log(localStorage.key(0));  //键值是以0开始的。       

      

    //删除localStorage中全部键值对。

        var localStorage = window.localStorage;

        localStorage.setItem("name","Lee");

        localStorage.clear();

       alert(localStorage.getItem("name"));  //null