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="width: 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>

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

巴特西

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

最新文章

热门文章