应用场景：

账单列表中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. UML建模学习3：UML基本构造块之关系

    今天我们来看UML基本构造块的还有一个要素--关系. UML中有表示基本图示符号之间的关系,它们是:依赖(dependency).泛化(generalization,也有的称继承).实 现(reali ...

  2. 基于Bootstrap的Asp.net Mvc 分页的实现(转)

    最近写了一个mvc 的 分页,样式是基于 bootstrap 的 ,提供查询条件,不过可以自己写样式根据个人的喜好,以此分享一下.首先新建一个Mvc 项目,既然是分页就需要一些数据,我这 边是模拟了一 ...

  3. php 不等待返回的实现方法（异步调用）

    PHP异步执行的常用方式常见的有以下几种,可以根据各自优缺点进行选择: 1.客户端页面采用AJAX技术请求服务器优点:最简单,也最快,就是在返回给客户端的HTML代码中,嵌入AJAX调用,或者,嵌入一 ...

  4. unity, stateMachine, change state name

    如图,假设wingsLayer下有个state,叫“New State“,现在想给它改名,则一定要保证当前wingsLayer为选中状态,然后才能在Inspector中可以为其改名.否则若当前选中的不 ...

  5. Objective-C的内存管理（一）黄金法则的理解

    转自:http://blog.csdn.net/lonelyroamer/article/details/7666851 一.内存管理黄金法则: The basic rule to apple is ...

  6. web压力测试指标

    1.TPS每秒钟完成的web请求响应数量TPS=并发数/响应时间TPS是衡量系统性能的重要指标 2.并发数时间段内,系统同时处理的web请求响应数量 3.响应时间所有web请求处理完毕的时间 4.吞吐 ...

  7. 用C语言(apue)实现 把时间戳转换为国标格式的字符串（2017-07-17 22:36:12）的函数

    /*******************************************************************************/ /** *** 函 数 名: cha ...

  8. love2d教程32--碎图打包器texturepacker

    texturepacker是一个碎图打包器,可以把小图合并成一张大图,并对大图做优化.我用的是特别版(只好用xx版了, 不然导出的图片会被变成红色),网盘下载,文件会提示有毒,我也是在网上找的,其实是 ...

  9. C语言 · 数的读法

    基础练习 数的读法   时间限制:1.0s   内存限制:512.0MB    问题描述 Tom教授正在给研究生讲授一门关于基因的课程,有一件事情让他颇为头疼:一条染色体上有成千上万个碱基对,它们从0 ...

  10. [Kernel]理解System call系统调用

    转自:http://os.51cto.com/art/200512/13510.htm 现在,您或许正在查看设备驱动程序,并感到奇怪:“函数 foo_read() 是如何被调用的?”或者可能疑惑: “ ...