• H5中使用Web Storage来存储结构化数据


    在上一篇对Web Storage的介绍中,可以看到,使用Storage保存key—value对时,key、value只能是字符串,这对于简单的数据来说已经够了,但是如果需要保存更复杂的数据,比如保存类似于表记录的数据,那该怎么办呢?

    下面提供一种解决方式,

    按如下步骤来存储结构化的数据

    1)把结构化数据封装成JSON对象

    2)把JSON对象转化为字符串再进行保存

    按如下步骤来读取结构化的数据

    1)读取JSON格式的字符串

    2)把JSON格式的字符串转化为JSON对象

    3)通过JSON对象的属性来提取数据

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <h2>客户端留言板</h2>
            留言标题:<input id="title" name="title" type="text" size="60" /><br />
            留言内容:<textarea id="content" name="content" cols="50" rows="8"></textarea><br />
            留言人:<input id="user" name="user" type="text" /><br />
            <input type="button" value="添加留言" onclick="addMsg()" />
            <input type="button" value="删除留言" onclick="clearMsg()" />
            <hr />
            <table style=" 550px;">
                <tr>
                    <th>留言标题</th>
                    <th>留言内容</th>
                    <th>留言用户</th>
                    <th>留言时间</th>
                </tr>
                <tbody id="show"></tbody>
            </table>
            <script type="text/javascript">
                var loadMsg = function()
                {
                    var tb = document.getElementById("show");
                    tb.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 msgStr = localStorage.getItem(key);
                        //把留言字符串转换为JavaScript对象
                      var msg = JSON.parse(msgStr);
                        var row = tb.insertRow(i);
                        row.insertCell(0).innerHTML = value;
                        row.insertCell(1).innerHTML = datestr;
                    }
                }
                
                var addMsg = function()
                {
                    var titleElement = document.getElementById("title").value;
                 var contentElement = document.getElementById("content").value;
                    var userElement = document.getElementById("user").value;
                    //将留言标题、留言内容、留言用户封装成对象
                    var msg={
                        title:titleElement,
                        content:contentElement,
                        user:userElement
                    }
                    var time = new Date().getTime();
                    //以当前时间为key来保存留言信息
                  localStorage.setItem(time,JSON.stringify(msg));
                    titleElement.value = "";
                    content.value = "";
                    userElement.value = "";
                    alert("保存数据");
                    loadMsg();
                }
                
                function clearMsg()
                {
                    localStorage.clear();
                    alert("全部留言信息已被清除");
                    loadMsg();
                }
                window.onload = loadMsg();
            </script>
        </body>
    </html>

    上面代码中加粗的代码就是保存结构化数据的关键代码。

  • 相关阅读:
    java基础--字符转换Unicode
    java基础---集合框架
    洛谷 P2049 魔术棋子(vector)
    洛谷 P3133 [USACO16JAN]Radio Contact G
    洛谷 P2679 子串
    洛谷 P2549 计算器写作文
    洛谷 P2758 编辑距离
    洛谷 P1481 魔族密码
    洛谷 P1754 球迷购票问题
    洛谷 P2782 友好城市
  • 原文地址:https://www.cnblogs.com/sMKing/p/5976346.html
Copyright © 2020-2023  润新知