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之多背景background使用示例
Oct 18 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
用HTML5制作数字时钟的教程
May 11 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 HTML / CSS
CSS基础详解
Oct 16 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
无线电的诞生过程
2021/03/01 无线电
老照片 - 几十年前的收音机与人
2021/03/02 无线电
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
php实现的递归提成方案实例
2015/11/14 PHP
索趣科技的答案
2007/02/07 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
Extjs中常用表单介绍与应用
2010/06/07 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
python Django连接MySQL数据库做增删改查
2013/11/07 Python
python格式化字符串实例总结
2014/09/28 Python
python下MySQLdb用法实例分析
2015/06/08 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
python生成圆形图片的方法
2020/03/25 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
python函数超时自动退出的实操方法
2020/12/28 Python
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
物理专业本科生自荐信
2014/01/30 职场文书
丽江古城导游词
2015/02/03 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
毕业生学校组织意见
2015/06/04 职场文书
Python测试框架pytest高阶用法全面详解
2022/06/01 Python