localStorage的理解和应用

什么是localStorage？

它是html5新增的一个本地存储API，所谓localStorage就是一个小仓库的意思，它有5M的大小空间，存储在浏览器中，我们可以通过js来操纵localStorage。下面来介绍一下它的用法。

 

为了更好地理解localstorage，我用它做了一个本地存储的小便签：

 

代码在我的github上：https://github.com/chenyejun/note

demo地址：http://htmlpreview.github.io/?https://github.com/chenyejun/note/blob/dev/note/index.html

 

 

（ie9以上，需要把文件放到服务器才能使用localStorage，不然会报错）

 

 

1、localStorage通过使用setItem(key,value)来设置元素以及值，如localStorage.setItem("name","chenyejun")

 

2、使用getItem(key)来获取元素值，如localStorage.getItem("name");

 

3、使用removeItem(key)清除key值,如localStorage.removeItem("name");

 

4、使用localStorage.clear()清除所有的key值;

 

5、使用localStorage.length可以获取本地存储key的个数;

 

6、按照序号读取本地存储变量的key值，使用localStorage.key(i)。

 

 

下面是demo的代码：

<style>
    #show{
       height:100px;
       width:100px;
       line-height:100px;
       text-align:center;
       background-color:#ccc;
     }

</style>

 

姓名: <inputid="name" type="text"><br />

学号；<inputid="number" type="text"><br />

 

<inputid="btn1" type="button" value="setItem保存"><br/>

<inputid="btn2" type="button" value="getItem获取"><br/>

<inputid="btn3" type="button" value="removeItem清除指定的key"><br/>

<inputid="btn4" type="button" value="clear()清除所有key和value"><br/>

<inputid="btn5" type="button" value="length获取key的个数"><br/>

 

<divid="show"></div>

 

<script>

    function$(id)

    {

        returndocument.getElementById(id);

    }

 

    window.οnlοad=function()

    {

        varoName=$('name');

        varoNumber=$('number');

 

        varoBtn1=$('btn1');

        varoBtn2=$('btn2');

        varoBtn3=$('btn3');

        varoBtn4=$('btn4');

        varoBtn5=$('btn5');        

 

        varoShow=$('show');

 

        oBtn1.οnclick=function()

        {

             localStorage.setItem(oName.value,oNumber.value);

        }

 

        oBtn2.οnclick=function()

        {

             varkeyValue=localStorage.getItem(oName.value);

             oShow.innerHTML=keyValue;

         }

 

         oBtn3.οnclick=function()

         {

              localStorage.removeItem(oName.value);

         }

 

         oBtn4.οnclick=function()

         {

              localStorage.clear();

         }

 

         oBtn5.οnclick=function()

         {

               var keyLength=localStorage.length;

               oShow.innerHTML=keyLength;

         }

 

     }

</script>

 

 

点击setItem保存：

 

按f5刷新后，按f12，点击resources——localstorage——file://

 

刷新页面后，输入之前的姓名，点击getItem获取，下面的灰色块得到xiaojun对应的value值 

 

 

输入姓名：xiaojun，点击removeItem清除指定的key，结果如下下图：

清除了指定的key=xiaojun

 

 

再随便添加几个key

 

然后添加clear()清除所有的key

结果如图：所有的key都被清空了

 

随便输入几个key，刷新，然后点击获取length，结果从灰色块输出，如下图：

以上是我自己的对localStorage的拙见，发现错误请多多交流