本文共 2002 字，大约阅读时间需要 6 分钟。
什么是localStorage？
它是html5新增的一个本地存储API，所谓localStorage就是一个小仓库的意思，它有5M的大小空间，存储在浏览器中，我们可以通过js来操纵localStorage。下面来介绍一下它的用法。
为了更好地理解localstorage，我用它做了一个本地存储的小便签：
代码在我的github上：
demo地址：
（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的拙见，发现错误请多多交流