HTML5 使用 sessionStorage 进行页面传值的方法


Posted in HTML / CSS onJuly 02, 2018

HTML5 提供的本地存储功能,使得web应用可以将数据存储在用户的本地浏览器。在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

在客户端存储的方法有两种:
1. localStorage: 没有时间限制的存储,而且容量大,至少5M大小;所有相同域名的页面都可以存储和获取相同的数据。
2. sessionStorage: 针对一个session的数据存储,该tab关掉就会消失。

目前大部分浏览器都已经很好地支持了 HTML5 ,但了为安全,使用前还是应该做客户端检测:

if (typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Sorry! No Web Storage support..
}

之所以会使用到这个功能,是因为我目前在做的一个数据型网站,要通过API接口查询参数传给后台,并获取数据库中返回的数据。而这里有一个问题,我要在页面 a 跳转到页面 b,然后在页面 b 调用API 接口将参数数据传给后台并获取数据,而该参数数据是在页面 a 获得的,那么如何将页面 a 产生的值传递给页面 b 呢?

假设我们要传给后台的值和数据格式是: {unitGroup:["一年级","二年级","三年级"];

那么在页面 a 生成了我们所需要的数据 unitGroup 后,则使用 sessionStorage:

if (typeof(Storage) !== "undefined") {
    sessionStorage["unitGroup"] = data.unit.value;
} else {
    sessionStorage["unitGroup"] = '';
}

然后在页面 b 就可以通过以下语句获取:

var unit_group = '';
if (typeof(Storage) !== "undefined") {
    var myunits = sessionStorage["unitGroup"];
    unit_group = myunits.split(",");
}

然后即可调用 ajax 将数据传给后台:

var newData = {unitGroup: unit_group};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
详解CSS3开启硬件加速的使用和坑
Aug 21 HTML / CSS
用css3制作纸张效果(外翻卷角)
Feb 01 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
HTML5 weui使用笔记
Nov 21 HTML / CSS
为什么你写的height:100%不起作用
May 10 HTML / CSS
HTML基本元素标签介绍
Feb 28 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 #HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 #HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
Jul 09 #HTML / CSS
canvas绘制表情包的示例代码
Jul 09 #HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 #HTML / CSS
详解Html5微信支付爬坑之路
Jul 24 #HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 #HTML / CSS
You might like
PHP5多态性与动态绑定介绍
2015/04/03 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
python中PIL安装简单教程
2016/04/21 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
使用python实现滑动验证码功能
2019/08/05 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
Python模块相关知识点小结
2020/03/09 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
前台接待的工作职责
2013/11/21 职场文书
大学生实习思想汇报
2014/01/12 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书