JS之本地存储

最新推荐文章于 2024-04-29 20:55:31 发布

骚小孩呀

最新推荐文章于 2024-04-29 20:55:31 发布

阅读量161

点赞数 1

分类专栏：前端文章标签： js storage

本文链接：https://blog.csdn.net/huaixiaohai_1/article/details/99831677

版权

前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

本文讲解用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();          清除所有的键值对

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

<script type="text/javascript">
   localStorage.setItem("name","saoxiaohai");
</script>

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

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

<!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()+"&nbsp;"+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>

骚小孩呀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS之本地存储

本文讲解用Web Storage来进行本地存储WebStorage主要分为如下两类：Session Storage:保存的数据生存期限与用户Session期限相同，用户期限结束时，Session Storage保存的数据也就丢了。Local Storage:保存在用户磁盘，保存的数据生存期限很长，除非用户或程序主动删除，否则一直保存。提供的方法：length;...
复制链接

扫一扫