应用场景：

账单列表中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. 有道翻译 / 百度翻译Api

    比较推荐使用百度翻译api 不推荐有道翻译,比较水. http://ai.youdao.com/docs/doc-trans-api.s#p02 http://ai.youdao.com/docs/d ...

  2. localStorage使用总结,页面跳转,保存值

    例子 <ul id="edit" contenteditable="true"> <li>修改我吧,然后刷新页面看看,^_^</l ...

  3. jquery常见插件用法表

    一:美化select表单:chosen.jquery.js http://harvesthq.github.io/chosen/ 关于ajax更新列表后需要触发下插件的事件,才会表现出来:(http: ...

  4. MySql（三）：MyISAM和InnoDB区别详解

    MyISAM是MySQL的默认数据库引擎(5.5版之前),由早期的ISAM(Indexed Sequential Access Method:有索引的顺序访问方法)所改良.虽然性能极佳,但却有一个缺点 ...

  5. node.js 连接 mysql

    var mysql = require("mysql"); var connection = mysql.createConnection({ host: '127.0.0.1', ...

  6. CSectsInfomation.cpp文件

    #include "SectsInfomation.h" #include "WidgetMgr.h" #include "XButton.h&quo ...

  7. MySQL是如何做到安全登陆

    首先Mysql的密码权限存储在mysql.user表中.我们不关注鉴权的部分,我们只关心身份认证,识别身份,后面的权限控制是很简单的事情.在mysql.user表中有个authentication_s ...

  8. jQuery select添加图标

    //下拉菜单样式 /*查找全部select的下拉菜单*/ function getElemsById(cot_val){ return document.getElementById(cot_val) ...

  9. spring中事务传播解读：PROPAGATION_REQUIRES_NEW

    第一步:获取事务状态,判断当前事务线程是否存在.第二步:如果当前事务的传播行为为PROPAGATION_REQUIRES_NEW,挂起当前线程绑定的事务,取消当前事务的sessionHolder和co ...

  10. 一款纯css3实现的发光屏幕旋转特效

    今天给大家带来一款纯css3实现的发光屏幕旋转特效.该屏幕由纯css3实现带发光旋转特效,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="s ...