应用场景：

账单列表中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. 整理 pandas 常用函数

    1. df.head(n): 显示数据前n行,不指定n,df.head则会显示所有的行 2. df.columns.values获取所有列索引的名称 3. df.column_name: 直接获取列c ...

  2. UIButton 按钮控件－IOS开发 （实例）

    转自:http://justcoding.iteye.com/blog/1467999 UIButton是一个标准的UIControl控件,所以如果你对UIControl不甚了解还是先看一下我的另一篇 ...

  3. 5.1 Zend_Log_Writer

    22.2.2. 写入到数据库 22.2.3. 踩熄Writer 22.2.4. 測试 Mock 22.2.5. 组合Writers

  4. cocos2d-x实例学习之常用类及其概要作用

    CCLayer,CCScene CCLayer类对应cocos2d-x引擎里的布景.每个游戏场景中都可以有很多层,每一层负责各自的任务,例如专门负责显示背景.专门负责显示道具和专门负责显示人物角色等. ...

  5. firewalld增加端口访问权限

    firewall-cmd --zone=public --add-port=80/tcp --permanent firewall-cmd --reload

  6. hive 中与mysql 中函数同名不同意的方法记录

    max 函数 在hive中max函数是一个聚合函数,所以,而且返回值是double ,而且后面必须跟group by ,这个和mysql差异很大 Built-in Aggregate Function ...

  7. Unix系统编程（）信号类型和默认行为

    信号类型和默认行为 就是讲了有多少个信号类型 好多啊,后面用到了再看...

  8. PHP——0126最初

    数据库mydb 表格info,nation 实现效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  9. Amazon EC2云端服务器的使用方法

    Amazon的EC2服务器可以理解为虚拟机,不过它是不需要安装系统的,它是根据镜像自动创建的.在申请EC2的时候,可以选择操作系统的类型,如Redhat Enterprise 6或ubuntu 12等 ...

  10. [转]第2台Tomcat端口变更失败解决办法

    原文链接:http://blog.csdn.net/preterhuman_peak/article/details/41803361 今天在服务器上部署了两个Tomcat.于是将其中一个的serve ...