需求

a.html页面生成订单信息，b.html中调用。

通过不操作数据库，直接在浏览器自带的数据库中进行操作，当然主要是对Json数据的操作。

a.html代码部分：

<!--html-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>页面1</title>

</head>

<body>

    <table >

        <tr>

            <td>编号</td>

            <td>名称</td>

            <td>类别</td>

            <td>借书日</td>

            <td>还书日</td>

            <td>金额</td>

        </tr>

        <tr>

            <td id="a">1</td>

            <td id="b">边城</td>

            <td id="c">小说</td>

            <td id="d">2017-3-2</td>

            <td id="e">2017-3-25</td>

            <td id="f">20</td>

        </tr>

    </table>

</body>

</html>

<!--script-->

<script>

       //获取td标签里面的数据，不能用value，要用innerText或者innerHTML

           var a1 = document.getElementById("a").innerText;

           var b1 = document.getElementById("b").innerText;

           var c1 = document.getElementById("c").innerText;

           var d1 = document.getElementById("d").innerText;

           var e1 = document.getElementById("e").innerText;

           var f1 = document.getElementById("f").innerText;

         var obj = {

            "编号": a1,

            "书名": b1,

            "类别":c1,

            "借书日":d1,

            "还书日":e1,

            "价格":f1

      };

     //讲js对象转化成字符串的形式

      obj = JSON.stringify(obj);

    //以字符串的形式储存到localstorage中

      localStorage.setItem("订单", obj);

按下F12，在浏览器中就可以看到已经保存到浏览器中了

下面要做的，就是在b.html中调用localstorage中的数据
b.html

<!--html部分-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>页面2</title>

</head>

<body>

     <table>

      <tr>

        <td id="a2"></td>

      </tr>

    </table>

</body>

</html>

<!--script部分-->

 <script>

         //将保存在localstorage中的字符串转化为js对象

      var odd=JSON.parse(localStorage.getItem("订单"));

        //访问对象中字段的值

      // console.log(odd.name);

      document.getElementById("a2").innerHTML = odd['书名'];

    </script>

最后打开b.html就能看到表格中出现书名

结论：json这块，存入的时候，要把json对象转换成json字符串，才能存入到localstorage中，在读取的时候，要把字符串转化成对象，才能读取对象中的值

localstorage浏览器储存的更多相关文章

  1. JavaScript工具类（三）：localStorage本地储存

    localStorage Web 存储 API 提供了 sessionStorage (会话存储) 和 localStorage(本地存储)两个存储对象来对网页的数据进行添加.删除.修改.查询操作. ...

  2. 【HTML5 localStorage本地储存】简介&基本语法

    了解localStorage localStorage是最新的HTML5中的新技术,它主要是用于本地储存.最近看了看localStorage,发现比cookie好多用了,还比cookie简单多了.于是 ...

  3. 利用bootstrap写的一点本地（localStorage）储存

    摘要: H5本地存储 在以前,我们想要存储一些数据,并且只是在前端使用,服务端并不会使用,我们只能存在cookie里,但是cookie会跟随请求头在客户端和服务端之间来回传递,而且cookie还有一些 ...

  4. VUE浏览器储存封装

    import {isFunction, extend} from 'lodash' const _originStorage = function () { var pluses = /\+/g fu ...

  5. HTML5 的web储存: localStorage & sessionStorage

    早期的浏览器使用cookie储存,HTML5新增web储存,包括:localStorage 和 sessiongStorage; localStorage:可以永久储存: sessionStorage ...

  6. nw.js的localStorage的物理储存位置

    前言 因为在做美团外卖商家端的nw.js壳子项目,需要保证在壳子里面使用localStorage的数据可以持久化保存. 发现nw可以保存,即使删除应用重写打包也可以保存,所以解决了这个需求,但是还是需 ...

  7. 原生JavaScript常用本地浏览器存储方法四(HTML5 LocalStorage sessionStorage)

    HTML5 LocalStorage浏览器的支持的情况如上图,IE在8.0的时候就支持了.不过需要注意的是,IE测试的时候需要服务器环境(或者localhost). 测试自然是检测浏览器是否支持本地存 ...

  8. Cookie, LocalStorage 与 SessionStorage

    Cookie, LocalStorage 与 SessionStorage相同点 都是储存在用户本地的数据. 意义在于避免数据在浏览器和服务器间不必要地来回传递. 三者的特点     同属于html5 ...

  9. <<< html5本地储存

    类似与Cookies,但由于Cookies储存量太小,大小也只有4-5KB的样子,html5的本地储存能存5M大小的数据 html5本地储存属性有,localStorage和sessionStorag ...

随机推荐

  1. kaggle——绝地求生游戏最终排名预测

    绝地求生游戏最终排名预测 知识点 数据读取与预览 数据可视化 构建随机森林预测模型 导入数据并预览 先导入数据并预览.本次实验同样来源于 Kaggle 上的一个竞赛: 绝地求生排名预测 ,由于原始数据 ...

  2. LeetCode No.103,104,105

    No.103 ZigzagLevelOrder 二叉树的锯齿形层次遍历 题目 给定一个二叉树,返回其节点值的锯齿形层次遍历.(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行). ...

  3. 做成像的你不能不了解的真相7-两分钟测算相机增益(Gain)

    前几期真相文章得到了读者积极的反馈,其中提问最多的就是这个公式: 首先,大家觉得这个公式太有用了.以前只能定性地评价图像质量,现在一下子就能直接算出信噪比,瞬间高大上了许多有木有.然而,杯具的现实是, ...

  4. kubernets轻量 contain log 日志收集技巧

    首先这里要收集的日志是容器的日志,而不是集群状态的日志 要完成的三个点,收集,监控,报警,收集是基础,监控和报警可以基于收集的日志来作,这篇主要实现收集 不想看字的可以直接看代码,一共没几行,尽量用调 ...

  5. cas sso单点登录 登录过程和登出过程原理说明

    CAS大体原理我就不说了,网上一大把,不过具体交互流程没说清楚,所以有这篇文章,如果有错误,请多多指教 登录过程 用户第一次访问一个CAS 服务的客户web 应用时(访问URL :http://192 ...

  6. jenkins-自定义工作空间目录

  7. C\C++ 位域操作

    几篇较全面的位域相关的文章: http://www.uplook.cn/blog/9/93362/ C/C++位域(Bit-fields)之我见 C中的位域与大小端问题 内存对齐全攻略–涉及位域的内存 ...

  8. Java集合 - 明的博客

    "In this world there are only two tragedies. One is not getting what one wants, and the other i ...

  9. 修改 commit message

    本文为原创文章,转载请标明出处 目录 修改上一条提交的 commit message 修改之前提交的 commit message 1. 修改上一条提交的 commit message git com ...

  10. spring boot 创建定时任务

    @Scheduled默认创建的线程是单线程,任务的执行会受到上一个任务的影响,创建定时任务也比较简单 123456789101112 @Component@Configuration //1.主要用于 ...