html5中的localStorage缓存

淩亂°似流年 2022-07-10 21:24 189阅读 0赞

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循环就是这样，然后再拼接字符串。  
笔记写完。