美文网首页
sessionStorage的成功使用

sessionStorage的成功使用

作者: 追风的云月 | 来源:发表于2017-12-22 09:40 被阅读0次

项目中遇到一个场景,index页面有多个入口,每个入口都可以进入主系统,但是需要带上入口id传给主系统里面的所有请求接口,并且进入主系统都是打开新窗口。难点在于如何把入口id传给打开的新窗口,并且会存在有多个新窗口主系统的存在。


入口界面.png
image.png
1. 首先系统中的fetch请求必须是公共方法
  • 因为我在项目中把所有fetch请求都写成一个公共方法,并且保存在一个名为common的JS文件中,所以我的思路是在打开的新窗口中,只要获取到一次id,并且传到common中的公共fetch方法,就可以实现需求。
2. 使用url的方式向新窗口传递index页面的入口id
  • 使用window.open("窗口地址+id"),然后在新窗口中使用window.location.href可以获取到id,并且使用一个公共方法传入fetch中,主系统中所有请求可以带上这个id,但是我发现当通过不同入口打开新窗口时,这个common中获取的id是通过最后入口获取的id,此时所有窗口主系统都是用同一个id,这样就达不到需求
3. 使用sessionStorage传递id
  • 在入口页面打开新窗口的同时,将入口id存入sessionStorage,在公共的fetch方法中获取id加入,就完美实现了需求
image.png
image.png

相关文章

  • sessionStorage的成功使用

    项目中遇到一个场景,index页面有多个入口,每个入口都可以进入主系统,但是需要带上入口id传给主系统里面的所有请...

  • JS工作日志

    1、sessionStorage、localStorage①使用sessionStorage、localStora...

  • sessionStorage的使用

    sessionStorage保存的数据用于浏览器的一次会话,当会话结束(通常是该窗口关闭),数据被清空;sessi...

  • cookie & sessionStorage & localS

    总结实战项目中使用的问题 cookie sessionStorage sessionStorage在新标签中是无法...

  • 8-10 localstorage和Vuex的其他使用

    localStorage、sessionStorage、Cookie的区别及用法 localStorage使用总结...

  • sessionStorage的基本使用

    生命周期 有效范围:仅在当前标签页有效。过期时间:关闭标签页销毁,无法设置过期时间。 使用方法 存储 :sess...

  • sessionStorage的使用案例

    0 我会用手机访问这个页面,上传完图片后在PC端刷新、 下载 图片太多的时候会分不清哪个已经下载了... 希望下载...

  • 封装了localStorage和sessionStorage的使

    /** @desc 封装了localStorage和sessionStorage的使用, 可直接保存, 获取对象.*/

  • js

    1、cookie、localStorage、sessionStorage的区别和使用? cookie:是存储在本地...

  • 常用的本地存储

    本地存储 sessionStorage(临时存储) localStorage(长期储存) 使用方式 session...

网友评论

      本文标题:sessionStorage的成功使用

      本文链接:https://www.haomeiwen.com/subject/zxktgxtx.html