返回顶部
首页 > 资讯 > 精选 >怎么在HTML5中利用sessionStorage实现页面传值
  • 288
分享到

怎么在HTML5中利用sessionStorage实现页面传值

2023-06-09 21:06:14 288人浏览 八月长安
摘要

怎么在HTML5中利用sessionStorage实现页面传值?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。在客户端存储的方法有两种:  localStorage:

怎么在HTML5中利用sessionStorage实现页面传值?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

在客户端存储的方法有两种: 

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};

看完上述内容,你们掌握怎么在HTML5中利用sessionStorage实现页面传值的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注编程网精选频道,感谢各位的阅读!

--结束END--

本文标题: 怎么在HTML5中利用sessionStorage实现页面传值

本文链接: https://lsjlt.com/news/257903.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 怎么在HTML5中利用sessionStorage实现页面传值
    怎么在HTML5中利用sessionStorage实现页面传值?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。在客户端存储的方法有两种:  localStorage: ...
    99+
    2023-06-09
  • ASP.NET中怎么实现页面间值传递
    这篇文章将为大家详细讲解有关ASP.NET中怎么实现页面间值传递,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。ASP.NET页面间值传递***种方法:通过URL链接地址传递send.aspx...
    99+
    2023-06-17
  • 怎么在Html5中实现页面二次分享
    怎么在Html5中实现页面二次分享?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。文档地址,通过引入官方API。文档写挺好,直接传入shareInfo就得了。<scri...
    99+
    2023-06-09
  • 怎么在Android中利用Activity实现跳转与传值
    今天就跟大家聊聊有关怎么在Android中利用Activity实现跳转与传值,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。Android Activity的跳转与传值详解Activi...
    99+
    2023-05-31
    android activity roi
  • javascript怎么实现页面跳转和传值
    本篇内容介绍了“javascript怎么实现页面跳转和传值”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、JavaScript 实现页面跳...
    99+
    2023-07-06
  • ASP.NET页面中怎么传递值
    本篇文章给大家分享的是有关ASP.NET页面中怎么传递值,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。一、QueryStringQueryString是一种非常简单的传值方式,...
    99+
    2023-06-17
  • 怎么在HTML5页面中使用localStorage
    这期内容当中小编将会给大家带来有关怎么在HTML5页面中使用localStorage,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。 一、什么是localStorage、sessionStorag...
    99+
    2023-06-09
  • 怎么在Html5页面中使用JSON实现一个动画
    今天就跟大家聊聊有关怎么在Html5页面中使用JSON实现一个动画,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。1.demo.html里面有很多内联的东西,使用时堆积在页面内不好看仔...
    99+
    2023-06-09
  • 怎么在JavaScript中利用sharedWorker 实现多页面通信
    怎么在JavaScript中利用sharedWorker 实现多页面通信?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。javascript是一种什么语言javascript...
    99+
    2023-06-14
  • html5 中怎么利用touch事件实现页面上下滑动效果
    html5 中怎么利用touch事件实现页面上下滑动效果,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。html5 touch事...
    99+
    2024-04-02
  • angular.js中怎么实现页面传参
    本篇文章给大家分享的是有关angular.js中怎么实现页面传参,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。(1)自带路由ngRoute&l...
    99+
    2024-04-02
  • 怎么在htnl5中利用svg实现页面高斯模糊
    怎么在htnl5中利用svg实现页面高斯模糊?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。stdDeviation设置模糊量,最低0<svg style=&...
    99+
    2023-06-09
  • Html5中怎么利用postMessage实现跨域消息传递
    Html5中怎么利用postMessage实现跨域消息传递,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。一、同源策略  &...
    99+
    2024-04-02
  • 怎么在HTML5页面中实现一个音乐播放器
    这篇文章给大家介绍怎么在HTML5页面中实现一个音乐播放器,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。<audio id="music1">浏览器不支持audio标签<...
    99+
    2023-06-09
  • 怎么在vue中利用组件传值实现观察者模式
    怎么在vue中利用组件传值实现观察者模式?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。第一步,我们先在main.js中注册一下busVue.prototype.$Bus&nbs...
    99+
    2023-06-15
  • asp中怎么利用ajax实现静态页面分页
    今天就跟大家聊聊有关asp中怎么利用ajax实现静态页面分页,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。代码如下:<html> <...
    99+
    2024-04-02
  • 微信小程序怎么实现页面跳转传值
    小编给大家分享一下微信小程序怎么实现页面跳转传值,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!微信小程序 页面跳转传值实现代码微...
    99+
    2024-04-02
  • 怎么在Java中实现值传递和引用传递
    怎么在Java中实现值传递和引用传递?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。Java的特点有哪些Java的特点有哪些1.Java语言作为静态面向对象编程语言的代表,实现了...
    99+
    2023-06-14
  • 怎么在HTML5页面中在线预览PDF
    这篇文章将为大家详细讲解有关怎么在HTML5页面中在线预览PDF,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。引用文件,直接复制下文可以直接使用<!DOCTYPE html&...
    99+
    2023-06-09
  • 微信小程序中页面间如何实现传值与页面取值操作
    小编给大家分享一下微信小程序中页面间如何实现传值与页面取值操作,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体如下:微信小程序...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作