html5中的localStorage缓存

来源：互联网发布：creo4数据交换编辑：程序博客网时间：2024/06/05 23:59

localStorage是h5的新机制，作为一个菜鸡的我刚刚学习，在此我记录我的学习过程并附上一个小Demo。
localStorage和sessionStorage的方法几乎相同。
先给出html代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>留言板</title>    <style>        hr{            border: none;            border-top: 1px solid #666;        }        textarea{            font-size: 20px;        }    </style>    <script src="localStorage.js"></script></head><body>    <h1>网页留言板</h1>    <textarea  id="dome" cols="60" rows="10"></textarea>    <br/>    <input type="button" value="保存" onclick="saveStorage('dome')"/>    <input type="button" value="清空" onclick="clearStorage('msg')"/>    <input type="button" value="读取" onclick="loadStorage('msg')"/>    <hr/>    <p id="msg">显示内容</p></body></html>

三个按纽，己经说得很样细了，主要还是js这块，下面是js代码

// 保存数据function saveStorage(id){    var data=document.getElementById(id).value;    //时间戳来做为key    var dataKey=new Date().getTime();    localStorage.setItem(dataKey,data);    loadStorage("msg");}// 加载数据function loadStorage(id){    var reselt='<table border="1">';    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.getHours()+":"+date.getMinutes()+":"+date.getSeconds();        reselt+='<tr>'                    +'<td>'+'第'+(i+1)+'条数据'+'</td>'+                    '<td>'+value+'</td>'+                    '<td>'+dateStr+'</td>'+                '</tr>'    }    reselt+='</table>';    document.getElementById(id).innerHTML=reselt;}// 清空数据function clearStorage(id){    localStorage.clear();    loadStorage(id);}

主要是这几个方法还有一个属性，我想讲为什么，但是觉得好累，就把localStorage中的几个方法写个笔记，返正也是给自己看。
1.setItem(key,value):添加一条缓存
key:一个键。
value:对应的值。
2.getItem(key):取出一条缓存
key:一个键，根据这个键取出对应的一条缓存
3.length:这个属性可以得到缓存的长度，第一条为零
4.key(number):这个方法跟上面的length属性有关number为索引，这个方法返回索引对应某一条缓存的键值，一般结合着循环，取出某条数据的键值然后再用 getItem(key)方法就可以得到数据，我上面的for循环就是这样，然后再拼接字符串。
笔记写完。

1 0