应用场景：

账单列表中A页面：点击其中的一列，ajax返回的数据在这一页

点击进入账单详情B页面：

因为在A页面已经做过ajax的请求了，所以希望把当前其中的一个数组对象传到B页面中，所以，就考虑到暂时存到sessionStorage中。

目的：A页面传json对象到B页面中；

方法：sessionStorage;

注意的问题，sessionStorage.setItem("key","value")内存储的都是字符串，所以，可想而知，如果以对象的形式存到sessionStorage,那么，在从sessionStorage.getItem("key")取到的也只能是object字符了；

所以解决的思路就如此了

就是，A页面对象数组转字符串数组，再存到sessionStorage,到B页面里面，取出，字符串数组再转对象数组。

这里主要用到了：

JSON.stringify();

JSON.parse();

总结：

  1. //总结 1、 存储前转换为json串的形式，取出后转换为json对象形式可以当做数组直接用；
  2. //     2、无论存储前是什么数据类型  取出来之后他都会是一个字符串（string）类型
  3. //     3、存储字符串时，取出来就直接可以用。
  4. //     4、特别注意，当你存储一个对象的时候，必须先转换为json串存储，不然对象就没法用了

这个博客写的很好理解：

http://blog.csdn.net/wxl1555/article/details/52666217

<!DOCTYPE html>

<html>

<head>

    <title>本地缓存</title>

</head>

<body>  

</body>

    <script type="text/javascript">

    //储存一个数组到本地缓存数组

    var a = [1,2,3]

    console.log(typeof a)  //object

    //储存

    sessionStorage.setItem("sa",a);

    //取出  并用a1接收这个值

    var a1 = sessionStorage.getItem("sa")  

    //打印a1的数据类型

    console.log( typeof a1);//结果为string  

    //取出来不能当做数组用，必须得把字符串转换成数组

    console.log(a1.split(",")) //  ["1", "2", "3"] 转换为“,”隔开的数组,其数组元素还是字符串，

                                //用之前先转换为Number类型,-0或者*1即可转换为Number类型  

    // console.log(JSON.parse(a1))  //这一行就会报错  因为a1本来就不是json串类型的数据，

    //他只能转换JSon串类型的数据  

    //若储存前先转换为json串类型

    var b = [1,2,3]  

    //转换为Json串

    var b1 = JSON.stringify(b);

    sessionStorage.setItem("sb",b1);  

    var b2 = sessionStorage.getItem("sb");  

    console.log( typeof b2) //string

    console.log( typeof JSON.parse(b2)) // object

    console.log( typeof JSON.parse(b2)[2])  //number

    console.log(  JSON.parse(b2)) //[1,2,3]

    console.log(JSON.parse(b2)[1])  //数组的第二个元素2  

    //总结 1、 存储前转换为json串的形式，取出后转换为json对象形式可以当做数组直接用；

    //     2、无论存储前是什么数据类型  取出来之后他都会是一个字符串（string）类型

    //     3、存储字符串时，取出来就直接可以用。

    //     4、特别注意，当你存储一个对象的时候，必须先转换为json串存储，不然对象就没法用了  

    //看下面的demo

    var c = {

        name:"name",

        age:18,

        love:"美女"

    }  

    sessionStorage.setItem("sc",c);  

    var c1 = sessionStorage.getItem("sc");  

    console.log(typeof c1)  //string  

    console.log(c1) // [object object]

    console.log(c1.anme) //undefined  

    //是不是要转换为json对象  我们试试

    // var c2 = JSON.parse(c1);   //直接报错    继续向下看  

    //存储前转换为json串  

    var d = {

        name:"name",

        age:18,

        love:"美女"

    }  

    var e = JSON.stringify(d)

    sessionStorage.setItem("sd",e);  

    var d1 = sessionStorage.getItem("sd");  

    console.log(typeof d1)  //string  

    console.log(d1) // {"name":"name","age":18,"love":"美女"}

    console.log(d1.anme) //undefined  

    var f = JSON.parse(d1)

    console.log(f)  //Object {name: "name", age: 18, love: "美女"}

    console.log(f.age) //18  

    </script>

</html>

sessionStorage存储json对象的更多相关文章

  1. 在 sessionStorage存储json对象

    目的:A页面存的东西要从B页面拿到 因为sessionStorage.setItem("key","value")内存储的都是字符串,所以,如果以对象的形式存到 ...

  2. localStorage存储JSON对象的小方法

    有时候,我们需要将数据存储到sessionStorage和localStorage中,这样做的好处有: 1 缓存数据 2 减少对内存的占用 但是,storage只能存储字符串的数据,对于JS中常用的数 ...

  3. localStorage存储数组，对象，localStorage,sessionStorage存储数组对象

    localStorage存储数组,对象,localStorage,sessionStorage存储数组对象   前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听, ...

  4. LocalStorage存储JSON对象的问题

    LocalStorage存储JSON对象的问题   localStorage - 没有时间限制的数据存储 1 var arr=[1,2,3]; 2 localStorage.setItem(" ...

  5. localStorage存储对象，sessionStorage存储数组对象

    前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听,数据只要发生变化就能很方便的自动渲染页面.但随即出现的问题是,之前用户操作的样式都会被重置掉. 例如我勾选了几个 ...

  6. sessionStorage数组、对象的存储和读取

    一个对象的demo如下: var obj = { name:"name", age:18, love:"美女" } sessionStorage.setItem ...

  7. sessionstorage中存储JSON数据

    在web开发时,可能经常会用到sessionstorage存储数据,存储单个字符串数据变量时并不困难 var str = 'This is a string'; sessionstorage.setI ...

  8. 原生JS：JSON对象详解

    JSON对象 支持到IE8,旧版的IE需要Polyfill 本文参考MDN做的详细整理,方便大家参考[MDN](https://developer.mozilla.org/zh-CN/docs/Web ...

  9. JSon 对象转字符的一些方法

    引用System.Web.Entity.dll public static string ToJSON(this object obj) { JavaScriptSerializer serializ ...

随机推荐

  1. map 类简介和例程

    一.标准库的map类型 使用map得包含map类所在的头文件 template < class Key, class Type, class Traits = less<Key>, ...

  2. putty自带工具plink自动登陆ssh

    PLINK.EXE -C -N -D 127.0.0.1:7000 root@111.111.111.111  -pw 123456 解释成中文: PLINK.EXE -启用数据压缩 -不要shell ...

  3. atitit.提升兼容性最佳实践 o9o

    atitit.提升兼容性最佳实践 o9o.doc 1. Atitit.兼容性的"一加三"策略 1 2. 扩展表模式 1 3. 同时运行模式 1 3.1. 完美的后向兼容性 2 3. ...

  4. Lattice 开发工具Diamond 相关版本下载地址

    百度网盘: https://wenku.baidu.com/view/21b98975192e45361066f5f3.html 官网下载: http://www.latticesemi.com/Su ...

  5. 简明 Vim 练级攻略（转，有些动态图不能显示，请看转载处）

    vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆VIM的命令分类,你一定会对这个编辑器失去兴趣的.下面的文章翻译自<Learn Vim Progress ...

  6. web中文字体Font-family应该写什么？

    最佳实践是: font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "微软雅黑",STXihei, ...

  7. java 新特性学习笔记

    java 1.7 Files.write(path,list,StandardCharsets.UTF_8,StandardOpenOption.APPEND); String preTime = F ...

  8. [Linux]read/write和fread/fwrite有什么区别

    转自:http://blog.csdn.net/xiaofei0859/article/details/51145051 二者都是对文件进行操作,那么二者有什么区别,用的时候该如何选择呢? 1. 区别 ...

  9. php常用的正则表达式

    1. 平时做网站经常要用正则表达式,下面是一些讲解和例子,仅供大家参考和修改使用:2. "^\d+$" //非负整数(正整数 + 0)3. "^[0-9]*[1-9][0 ...

  10. JSONObject与JSONArray

    最近在学习过程中用到了稍微复杂点的json数据需要将json数据解析出来,这里就截取一部分作为例子 1.JSONObject介绍 JSONObject-lib包是一个beans,collections ...