JS之本地存储

r囧r小猫 2021-10-14 06:28 344阅读 0赞

**本文讲解用Web  Storage来进行本地存储**

**WebStorage主要分为如下两类：**

**Session Storage:**

保存的数据生存期限与用户Session期限相同，用户期限结束时，Session Storage保存的数据也就丢了。

**Local Storage:**

保存在用户磁盘，保存的数据生存期限很长，除非用户或程序主动删除，否则一直保存。

提供的方法：

length;     查看存储了多少组键值对
    key(index);   返回storage中第index个key
    getItem(key); 返回storage中key对应的值
    set(key,value); 存储指定的键值对
    removeItem(key); 删除key对应的键值对
    clear();          清除所有的键值对

浏览器中查看存储的键值对，例：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YWl4aWFvaGFpXzE_size_16_color_FFFFFF_t_70][]

在浏览器中可以看到存储的信息。

下面通过一个记事本的小例子来看一下：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>笔记本</title>
    </head>
    <body>
        <h2>客户端笔记本</h2>
        标题：<input type="text" class="date" /><br/>
        内容：<input type="text" class="date" /><br/>
        添加人：<input type="text" class="date" /><br/>
        添加时间：<input type="text" class="date" /><br/>
        <input type="button" value="添加事件" onclick="addMsg()"/>
        <input type="button" value="清除事件" onclick="clearMsg()"/>
        <hr/>
        <table style="width: 600px">
            <tr>
                <th>标题</th>
                <th>内容</th>
                <th>添加人</th>
                <th>添加时间</th>
            </tr>
            <tbody id="show"></tbody>
        </table>
        <script type="text/javascript">
            var loadMsg = function(){
                var td = document.getElementById("show");
                td.innerHTML="";
                for(var i=0;i<localStorage.length;i++){
                    var key =localStorage.key(i);
                    var date = new Date();
                    date.setTime(key);
                    var datestr = date.toLocaleDateString()+" "+date.toLocaleTimeString();
                    var value = localStorage[key];
                    var json = JSON.parse(value);
    //                td.innerHTML+="<tr><td>"+value+"</td><td>"+datestr+"</td></tr>";
                    var row = td.insertRow(i);
                    row.insertCell(0).innerHTML=json.title;
                    row.insertCell(1).innerHTML=json.context;
                    row.insertCell(2).innerHTML=json.people;
                    row.insertCell(3).innerHTML=json.time;
                }
            };
            var addMsg =function(){
                var inputs = document.getElementsByClassName("date");
                var obj = new Object();
                obj.title=inputs[0].value;
                obj.context=inputs[1].value;
                obj.people = inputs[2].value;
                obj.time= inputs[3].value;
                var time = new Date().getTime();
                localStorage[time] = JSON.stringify(obj);
                for(let j=0;j<inputs.length;j++){
                    inputs[j].value="";
                }
                alert("数据已保存");
                loadMsg();
            };
            function clearMsg(){
                localStorage.clear();
                alert("全部信息已经删除");
                loadMsg();
            }
            window.onload=loadMsg();
        </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YWl4aWFvaGFpXzE_size_16_color_FFFFFF_t_70]: /images/20211013/0cc6009f09fa480d81de65842f0ced9b.png