在上一篇对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来存储结构化数据的更多相关文章

  1. H5新增的Web Storage本地存储

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...

  2. 利用Gson和SharePreference存储结构化数据

    问题的导入 Android互联网产品通常会有很多的结构化数据需要保存,比如对于登录这个流程,通常会保存诸如username.profile_pic.access_token等等之类的数据,这些数据可以 ...

  3. 使用json存储结构化数据

    从文件中读写字符串很容易.数值就要多费点儿周折,因为read ()方法只会返回字符串,应将其传入int()这样的函数,就可以将'123'这样的字符串转换为对应的数值 123.当你想要保存更为复杂的数据 ...

  4. WEB 面向开发者的结构化数据

    通常用于google搜索 See also: video 探索搜索库

  5. Bigtable：一个分布式的结构化数据存储系统

    Bigtable:一个分布式的结构化数据存储系统 摘要 Bigtable是一个管理结构化数据的分布式存储系统,它被设计用来处理海量数据:分布在数千台通用服务器上的PB级的数据.Google的很多项目将 ...

  6. H5本地储存Web Storage

    一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...

  7. 解析H5本地储存Web Storage

    一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...

  8. html5中的Web Storage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...

  9. MySQL 5.7：非结构化数据存储的新选择

    本文转载自:http://www.innomysql.net/article/23959.html (只作转载, 不代表本站和博主同意文中观点或证实文中信息) 工作10余年,没有一个版本能像MySQL ...

随机推荐

  1. 面试题中经常遇到的SQL题：删除重复数据，保留其中一条

    如题,解决思路如下: 1.首先我们需要找出拥有重复数据的记录 ---以name字段分组 select Name,COUNT(Name) as [count] from Permission group ...

  2. C#的Response.BinaryWrite图片乱码问题

    今天学习Response对象,该对象的有很多的输出方式,其中有一个binaryWrite可以输出图片,但是在输出图片一开始出现了乱码,后来通过百度得到解决: 代码: FileStream stream ...

  3. pta函数作业

    7-10 设计思路:本题需要判断一个正整数数是否为素数,所谓素数,就是除一和本身外没有其他因数的数.具体判断过程如下:对于一个大于一的整数,从2开始用循环计数i去除此数,若余数不为零,则循环计数i自加 ...

  4. LeetCode -- 3SumCloset

    Question: Given an array S of n integers, find three integers in S such that the sum is closest to a ...

  5. [洛谷P2839][国家集训队]middle

    题目大意:给你一个长度为$n$的序列$s$.$Q$个询问,问在$s$中的左端点在$[a,b]$之间,右端点在$[c,d]$之间的子段中,最大的中位数. 强制在线. 题解:区间中位数?二分答案,如果询问 ...

  6. Linux相关——关于文件调用

    本文主要记录几个常见文件调用(表示为了造数据试了n种方法,,,发现了一些神奇的东西,会在下面一一说明. 首先在程序中我们可以打开和关闭程序. 常见的freopen用法简单,但是只能使用一次,如果在程序 ...

  7. MySQL自增属性auto_increment_increment和auto_increment_offset

    MySQL的系统变量或会话变量auto_increment_increment(自增步长)和auto_increment_offset(自增偏移量)控制着数据表的自增列ID. mysql> sh ...

  8. 【NOIP模拟赛】黑红树 期望概率dp

    这是一道比较水的期望概率dp但是考场想歪了.......我们可以发现奇数一定是不能掉下来的,因为若奇数掉下来那么上一次偶数一定不会好好待着,那么我们考虑,一个点掉下来一定是有h/2-1个红(黑),h/ ...

  9. 于是他错误的点名开始了 [Trie]

    于是他错误的点名开始了 题目背景 XS中学化学竞赛组教练是一个酷爱炉石的人. 他会一边搓炉石一边点名以至于有一天他连续点到了某个同学两次,然后正好被路过的校长发现了然后就是一顿欧拉欧拉欧拉(详情请见已 ...

  10. iebackground+icon图标兼容

    <!DOCTYPE > <html> <head> <title>zepto</title> <meta name="nam ...