使用sessionStorage实现页面间传值与传对象

问题描述：业务从A页面跳转到B页面，需要由A页面向B页面传入一个对象。B页面解析对象中的值，然后根据这些值做具体的业务逻辑。
一般的传值方法如下：
A页面跳转到B页面时：
b.html?xxx=xxxxxx&qqqq=qqqqq
B页面使用jquery直接可以get到相应的key的value值。
这种方法的弊端：无法完成一个对象的传递。
解决方法：使用sessionStorage会话存储对象。

sessionStorage介绍

sessionStorage 是HTML5新增的一个会话存储对象，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象。

一些特点：
1. 同源策略限制。若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。(IE8和9存储数据仅基于同一主机名，忽略协议（HTTP和HTTPS）和端口号的要求)
2. 单标签页限制。sessionStorage操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage数据。
3. 只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。(若使用Chrome的恢复标签页功能，seesionStorage的数据也会恢复)。
4. 存储方式。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。true值会转换为”true”)。
5. 存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。可访问
http://dev-test.nemikor.com/web-storage/support-test/ 测试浏览器的存储上限。
适合场景
sessionStorage 非常适合SPA(单页应用程序)，可以方便在各业务模块进行传值。
示例
1存储数据

采用setItem()方法存储
sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值
通过属性方式存储　　
sessionStorage['testKey'] = '这是一个测试的value值';

2读取数据

通过getItem()方法取值
sessionStorage.getItem('testKey'); // => 返回testKey对应的值
通过属性方式取值
sessionStorage['testKey']; // => 这是一个测试的value值

3存取对象

sessionStorage也可存储Json对象：存储时，通过JSON.stringify()将对象转换为文本格式；读取时，通过JSON.parse()将文本转换回对象。

var userEntity = {name: 'tom',age: 22
};
// 存储值：将对象转换为Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity));
// 取值时：把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom

使用sessionStorage实现页面间传值与传对象相关推荐

java 页面之间传值_JSP页面间传值方法
JSP页面间传值方法[@more@] a:最常用的方法是用form中的text, ,然后在b.jsp页面中这样获取 String username=request.getParameter(" ...
Windows Phone 7 - 页面间传值来源-http://blog.csdn.net/dncts/article/details/6160067
Windows Phone 7 - 页面间传值分类: Windows Phone 7 2011-01-23 20:42 441人阅读评论(0) 收藏举报在页面间导航时传递参数的方式大致有3种, ...
vue 传参微信_小猿圈web前端之微信小程序页面间跳转传参方式总结
原标题:小猿圈web前端之微信小程序页面间跳转传参方式总结最近小程序发展的越来越快,很多大公司也在打造自己的小程序平台以及购物小程序等等,今天小猿圈web前端讲师就总结了关于微信小程序的知识点,首先 ...
【项目经验】——ASP.NET页面间传值
最近项目中涉及到很多页面传值的内容,今天,就和大家分享一下最常用的集中ASP.NET页面间传值的几种方法. 一.QueryString传值 QueryString是平常传值中用的比较多的一种方式,使用 ...
ASP.NET十分有用的页面间传值方法(转)
一.目前在ASP.NET中页面传值共有这么几种方式: 1.表单提交 <form action= "target.aspx" method = "post&qu ...
Asp.net页面间传值方式汇总
在优化.NET中,用到了页面传值的功能,汇总出来跟大家分享一下. 我找到了七种传值方式,分别是:URL传值,Session传值,Cookie传值,Server.Transfer传值,Applicati ...
微信小程序页面间传值方法
1 通过data-*属性传值 console.log(e.currentTarget.dataset) 实例:data- 是固定的写法,-后面的名字可以随便起字母或英文,但获取的时候要写对应名称. v ...
vue组件间传值: 父传子、子传父、非父子组件传值
父组件向子组件传值 // 父组件通过属性将值传递给子组件 <template><div><closePopup :optionsID="optionsID&qu ...
HTML框架IFrame结合JS在主页面和子页面间传值
下面主页面和子页面互相传值的DEMO 如果仅仅需要子页面触发主页面的函数仅需 [ parent.window.你的函数 ] 就可以了 DOM方法: 父窗口操作IFRAME:window.frames ...

使用sessionStorage实现页面间传值与传对象

sessionStorage介绍

使用sessionStorage实现页面间传值与传对象相关推荐

最新文章

热门文章