需求

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. EF 执行存储过程

  2. demo4j解析xml

    1//先加入dom4j.jar包 2import java.util.HashMap; 3import java.util.Iterator; 4import java.util.Map; 5 6im ...

  3. mysql命令运行sql文件

    navicat转储sql,cmd 打开运行 切换到mysql目录下:mysql -uroot -p  回车输入密码 创建数据库语句:  CREATE DATABASE `tcc` CHARACTER  ...

  4. [LC] 22. Generate Parentheses

    Given n pairs of parentheses, write a function to generate all combinations of well-formed parenthes ...

  5. SpringMVC配置前端控制器的路径问题

    在使用SpringMVC时,都需要在web.xml中配置一个前端控制器DispatcherServlet 控制器是一个servlet,但这个路径配置就有很多种,之前都是以扩展名配置的路径,如*.do, ...

  6. 数字签名和数字证书等openssl加密基本术语

    openssl 算法基础 1.1 对称算法 : 密钥相同,加密解密使用同一密钥 1.2 摘要算法:无论用户输入的数据什么长度,输出的都是固定长度的密文:即信息摘要,可用于判断数据的完整性:目前常用的有 ...

  7. Spring-IOC(DI)的三种注入方式

    spring为方便不同的需求,为我们提供了3中不同的注入方式分别是set.get方法注入,构造注入还有p命名空间注入,老规矩,直接上代码 首先创建实体类Student public class Stu ...

  8. [LC] 268. Missing Number

    Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is missin ...

  9. windows下Jmeter压测端口占用问题

    https://blog.csdn.net/weixin_43757847/article/details/88188091 1 前情提要人脸识别项目中,云平台新增了人脸识别的校验接口.考虑到存在大量 ...

  10. Linux(CentOS_7.6)安装Nginx

    1.安装依赖 12 yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 2.下载Nginx并解压 1234567 c ...