localStorage存储结构化数据

最新推荐文章于 2021-05-14 11:31:05 发布

静茹是偶对象

最新推荐文章于 2021-05-14 11:31:05 发布

阅读量774

点赞数

分类专栏： JSON 文章标签： javascript

本文链接：https://blog.csdn.net/jingru2017/article/details/79047253

版权

JSON 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

李刚的《疯狂HTML5+CSS3+JavaScript讲义》书中，在541页讲到存储结构化数据是有一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>客户端记事本</h2>
    标题：<input type="text" id="title" name="title" size="60"/><br/><br/>
    事件信息：<textarea name="content" id="content" cols="50" rows="8"></textarea><br/>
    添加人：<input type="text" id="user" name="user"/><br/><br/>
    <input type="button" value="添加事件" οnclick="addMsg();"/>
    <input type="button" value="清除事件" οnclick="clearMsg();"/><br/>
    <hr>
    <table width="600px" border="1">
        <tr>
            <td>标题</td>
            <td>标题事件内容</td>
            <td>添加人</td>
            <td>添加时间</td>
        </tr>
        <tbody id="show"></tbody>
    </table>
    <script type="text/javascript">
        var addMsg = function () {
            var titleElement = document.getElementById("title");
            var contentElement = document.getElementById("content");
            var userElement = document.getElementById("user");
            var msg = {
                title: titleElement.value,
                content: contentElement.value,
                user: userElement.value
            }
            var time = new Date().getTime();
            localStorage['_fk'+time] = JSON.stringify(msg);
            titleElement.value = "";
            contentElement.value = "";
            userElement.value = "";
            alert("数据已经保存。");
            loadMsg();
        }
        var loadMsg = function () {
            var tb = document.getElementById("show");
            tb.innerHTML = "";
            for(var i = 0 , j=0; i < localStorage.length ; i++) {
                var key = localStorage.key(i);
                if(key.indexOf('_fk') == 0) {
                    var date = new Date();
                    date.setTime(key.substring(3));
                    var datestr = date.toLocaleDateString() + "&nbsp;" + date.toLocaleTimeString();
                    var msgStr = localStorage[key];
                    var msg = JSON.parse(msgStr);
                    var row = tb.insertRow(j++);
                    row.insertCell(0).innerHTML = msg.title;
                    row.insertCell(1).innerHTML = msg.content;
                    row.insertCell(2).innerHTML = msg.user;
                    row.insertCell(3).innerHTML = datestr;

                }
            }
        }
        var clearMsg = function () {
            localStorage.clear();
            alert("全部事件已被删除。");
            loadMsg();
        }
        window.onload = loadMsg();
    </script>
</body>
</html>

其中非常清楚明白地说明了如何存储结构化数据。

首先，将你需要存储的数据封装成对象

var msg = {
    title: titleElement.value,
    content: contentElement.value,
    user: userElement.value
}

然后使用JSON对象的stringify()方法吧javascript对象转换成JSON字符串，目的是为了方便保存这个字符串。

localStorage['_fk'+time] = JSON.stringify(msg);

读取结构化数据是，利用JSON对象的parse()方法吧JSON字符串恢复成javascript对象即可。

var msgStr = localStorage[key];
var msg = JSON.parse(msgStr);

非常容易看出，msgStr=JSON.stringify(msg)

我的理解：localStorage就相当于一个储存室，里面有家用电器，桌椅板凳，瓜果蔬菜，总之有很多玩意，这些玩意都有编号，比如电视机1号，冰箱2号。有一天你想往里放置一些水果，猕猴桃，香蕉，葡萄，橘子等一些吧，这些都是一类嘛。家里面的东西你得放置的有条理啊，所以你找了一筐，咔咔一顿干，把水果全扔框里了，这个框和里面的水果就是你封装成的javascript对象（msg）。装完后，你突然想到你的城市女友特别喜欢吃水果，为了表达你的爱，你指定得把你的所有水果都留着给你女友吃啊（女人嘛，女人心海底针，说不准她爱吃啥，都留着呗），为了让水果保鲜，你找了一个大个的冰柜，这个冰柜就是JSON.stringify()。冰柜找来后，接下来肯定要把水果装进去啊。此时此刻你就会想，时间就是金钱，劳资是要干大事的，往冰柜里挨个装水果，是老爷们儿干的活吗？所以你会毫不犹豫地咔咔一顿干，把框子直接搁冰柜里了，这就是JSON.stringify(javacript对象)，因为你家老衬钱了，好多冰柜，为了区别你在冰柜外面贴了一个号：520（这个就是key）。过了一日，你女朋友果然来了，只是单纯地来吃水果哦，哈哈。想吃水果分三步：首先根据储存室里的编号找到冰箱（var msgStr = localStorage[key];）然后把冰箱门打开（var msg=JSON.parse(msgStr);),打开冰箱门后，你看到的是个框msg,里面装着水果；最后你想吃啥从框里拿就好了嘛。

学习前端能这么愉快啊，关键在拓展思维，哈哈哈哈哈哈哈哈哈啊哈哈。。。