应用场景：

账单列表中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. jQuery开发插件的两种方式

    最近挺多人写jQuery的,都是关于jQuery扩展方面的,使用方面的讲的比较多,但是关于详细的一个基础的过程讲的比较少一点,做web开发的基本上都会用到jQuery,本人就根据jQuery的使用经验 ...

  2. POJ 2750 Potted Flower （单点改动求线段树上最大子序列和）

    题目大意: 在一个序列上每次改动一个值,然后求出它的最大的子序列和. 思路分析: 首先我们不考虑不成环的问题.那就是直接求每一个区间的最大值就好了. 可是此处成环,那么看一下以下例子. 5 1 -2 ...

  3. 安卓编译报错：Dex Loader] Unable to execute dex: java.nio.BufferOverflowException. Check the Eclipse log for stack trace.

    今天在编译别人的project时遇到了这个错误,心想应该不是代码的问题.网上搜了一下,应该是sdk版本设置的问题,要设置为最新sdk版本才可以. 解决办法就是修改project.properties里 ...

  4. 小程序 wx.request ajax示例

    简单示例 https://developers.weixin.qq.com/miniprogram/dev/api/network-request.html wx.request({ method: ...

  5. jenkins 下载插件失败处理办法

    jenkins 下载插件失败,提示: java.io.IOException: Downloaded file /app/jenkins_home/plugins/jacoco.jpi.tmp doe ...

  6. setTimeout 的用法

    只有第二种和第三种是正确的用法. setTimeout(函数名, 延迟) setTimeout(show(), 1000); show() 是函数运行,这种传递方式真正传进去的是 show 函数的返回 ...

  7. FileInputStream与FileOutputStream类

    FileInputStream和FileOutputStream类分别用来创建磁盘文件的输入流和输出流对象,通过它们的构造函数来指定文件路径和文件名. 创建FileInputStream实例对象时,指 ...

  8. insert，update和delete下的注入

    PS:刚开始看到这个注入方式的时候,问米哥:“为啥updatexml就足以报错了,为啥还要使用insert?”知道答案的我觉得问了一个傻蛋的问题.不过没关系.慢慢积累.答案很简单,并不是所有的注入点程 ...

  9. love2d--glsl02变量和语句

    Shader分为顶点着色器和片段着色器,GPU先处理顶点再处理片段,大概可以这么理解, 顶点着色器处理模型里的点,输出处理后的数据,这些数据经过GPU其它模块处理后传入 片段着色器,经片段着色器综合后 ...

  10. java 读取Zip文件进行写入

    直接读取ZIp文件读取写入到别的文件中. package jp.co.misumi.mdm.batch; import java.io.BufferedReader; import java.io.F ...