前段跨页面传值SessionStorage

最新推荐文章于 2024-07-27 21:36:33 发布
最新推荐文章于 2024-07-27 21:36:33 发布
阅读量1.9k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ssssdfdsf/article/details/77337276
本文介绍了如何将JSON格式的对象存储到浏览器的sessionStorage中，并提供了具体的JavaScript代码示例。同时，文中也提到了该方法的局限性和潜在风险。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

//将对象存在浏览器中
		var project = $("#project-list").datagrid("getSelected");
		var str = JSON.stringify(project); //转为json格式字符串//注:sessionStorage._______后面名字不要重复 若名字重复则可能替代其中的值
			sessionStorage.project = str;//存入浏览器sessionStorage
var  s = sessionStorage.project;//从sessionStorage得到数据  （json格式对象）



这个方法不能常用因为是存在浏览器本地的数据对数据的更新传递有可能出现错误
而且相对来说不安全




                

        

    

    
  



    



                



	

		

			

				
					
前端跨页面传值  cookie,sessionStorage,url传参

				
			

			

				

					afei199106的博客
				

				

					04-24
					
					867
					
				

			

		

		

			
				
1.cookie前端与后台都可以创建保存在客户端,有默认有效时间,当然也可以清除浏览器cookie;
创建方式:

var name="liuliu";var age=28;
document.cookie="name="+name;document.cookie="age="+age;

cookie键值对以等号方式连接cookie之间用分号分开;
获取全部cookie字...

			
		

	



                

            
              



	

		

			

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

					
热门推荐

				
			

			

				

					wangshuang1631的博客
				

				

					07-19
					
					1万+
					
				

			

		

		

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

			
		

	



              


  
              

                


	

		

			

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

				
			

			

				

					12-14
				

			

		

		

			
				
HTML5 提供的本地存储功能，使得web应用可以将数据存储在用户的本地浏览器。在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
在客户端存储的方法有两种： 
1. localStorage: 没有时间限制的存储，而且容量大，至少5M大小；所有相同域名的页面都可以存储和获取相同的数据。 
2. sessionStorage: 针对一个session的数据存储，该tab关掉就会消失。
目前大部分浏览器都已经很好地支持了 HTML5 ，但了为安全，使用前还是应该做客户端检测：

if (typeof(Storage) 

			
		

	





	

		

			

				
					
sessionStorage跨页面通信

				
			

			

				

					Little_fairy_lzx的博客
				

				

					03-09
					
					2849
					
				

			

		

		

			
				
sessionStorage在同一个页面中存储和取值是没有问题的,（这里的页面是同一个html文件）跨页面的话就会有问题比如浏览器导航栏的tab。
例如：页面a.html和页面b.html同时打开，这时在a.html中存储token，在页面b.html中是取不到的。
解决办法：
在页面a中打开页面b，并创建一个storage事件对象将a中要存储的值在b中存储。
 function openWindow() {
    let newWindow = window.open('child.html','new

			
		

	



		

			
		



	

		

			

				
					
sessionStorage传值给别的页面

					
最新发布

				
			

			

				

					weixin_63128816的博客
				

				

					07-27
					
					343
					
				

			

		

		

			
				
是一种在浏览器中存储数据的方法，这些数据只在当前浏览器标签页或窗口的会话期间有效。它的主要用途是在不同页面间共享数据，比如临时保存用户信息或者表单数据，但是不适合存储敏感信息。toIndex是点击按钮后，进入Home页面，同时把schoolid保存下来。另一个页面调用sessionStorage的getItem方法拿到schoolid.

			
		

	





	

		

			

				
					
sessionStorage不能跨标签页解决方案--vue项目

				
			

			

				

					weixin_43837305的博客
				

				

					09-23
					
					9117
					
				

			

		

		

			
				
sessionStorage不能跨标签页解决方案–vue项目
现有的浏览器存储机制
localStorage ：~5MB，数据永久保存直到用户手动删除
sessionStorage ：~5MB，数据只在当前标签页有效
cookie ：~4KB，可以设置成永久有效
session cookie ：~4KB，当用户关闭浏览器时删除（并非总能立即删除）
安全的认证token保存
一些重要的系统会要求当用户关闭标签页时会话立刻到期。
为了达到这个目的，不仅绝对不应该使用cookies来保存任何敏感信息（例如认证to

			
		

	





	

		

			

				
					
前端页面之间的传值

				
			

			

				

					m0_63467982的博客
				

				

					02-23
					
					1010
					
				

			

		

		

			
				
有两种方法cookie和localStorage/sessionStorage


cookie

工具方法封装：
	
	
var operator="=";

    function getCookieValue(keyStr) {
        var value=null;
        var s=window.document.cookie;
        var arr=s.split("; ");
        for (var i = 0; i < arr.length...

			
		

	





	

		

			

				
					
sessionStorage不能跨窗口取值

				
			

			

				

					BluerCat的博客
				

				

					07-20
					
					2816
					
				

			

		

		

			
				
sessionStorage是页面临时缓存存储，关闭当前页面后，就会自动删除，不能从另外一个新的窗口获取当前窗口的sessionStorage缓存。例如a.vue窗口中存在sessionStorage缓存，b.vue想取到a.vue中的sessionStorage缓存。
解决方法，将sessionStorage中的缓存存储到localStorage本地缓存中（建议存储数据不要过多，并及时清理）。

...

			
		

	





	

		

			

				
					
利用sessionStorage来做页面之间的通信

				
			

			

				

					huanlesyaya的博客
				

				

					12-25
					
					1179
					
				

			

		

		

			
				
上篇刚说了下localStorage怎么在两个不同的页面之间做通信以及他们通信成功的几个条件，今天就顺便讲下sessionStorage是怎么做的。sessionStosrage 这个语法跟localStorage是一样的,如下:
// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage...

			
		

	





	

		

			

				
					
localStorage和sessionStorage在跨页面存储中的区别

				
			

			

				

					九段刀客的博客
				

				

					12-04
					
					3142
					
				

			

		

		

			
				
我们知道localStorage和sessionStorage一个是长期缓存，一个是标签页关闭就会清除，但是他们还有一个区别我们平时可能会忽略，但是在同一个浏览器要实现登录多个用户是就会用到这一特性。

sessionStorage不会跨标签页存储，而localStorage会跨标签页存储。
如下，同一个浏览器A标签和B标签同时打开一个地址

写一段代码来测试区别
<input type=...

			
		

	





	

		

			

				
					
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面，是否会共享

				
			

			

				

					qq_25416827的博客
				

				

					04-22
					
					847
					
				

			

		

		

			
				
一旦用户关闭了窗口或标签页，存储在 sessionStorage 中的数据就会被清除。需要注意的是，即使在相同的浏览器和相同的页面下，如果页面是在新的窗口或标签页中打开的，那么它们之间的 sessionStorage 也是不共享的。这是因为 sessionStorage 的设计初衷是为了在单个页面会话期间保持数据的独立性，而不是为了在不同页面或窗口之间共享数据。总结来说，sessionStorage 提供了一种在单个页面会话期间存储数据的临时解决方案，但它并不适用于需要在不同窗口或会话之间共享数据的场景。

			
		

	





	

		

			

				
					
存储事件cookie localstorage sessionstorage的区别和跨页面传值

				
			

			

				

					m0_46335802的博客
				

				

					05-25
					
					656
					
				

			

		

		

			
				
存储事件cookie localstorage sessionstorage的区别和跨页面传值

			
		

	





	

		

			

				
					
js携带token跳转到其他页面

				
			

			

				

					不许人间丶见白头
				

				

					09-06
					
					3426
					
				

			

		

		

			
				
根据用户名密码换取token成功后，将token存储到本地，以供其他页面获取，并能跳转到其他页面。本文举例从登录页面跳转到首页。

			
		

	





	

		

			

				
					
sessionstorage ie8下跨页面_JavaScript跨浏览器获取浏览器窗口大小

				
			

			

				

					weixin_39980903的博客
				

				

					12-15
					
					198
					
				

			

		

		

			
				
跨浏览器确定一个窗口的大小不是一件简单的事。innerWidth、innerHeight、outerWidth和outerHeight属性IE9+、Firefox、Safari、Opera和Chrome均为此提供了4个属性：innerWidth、innerHeight、outerWidth和outerHeight。在IE9+、Firefox、Safari中，outerWidth和outerHeig...

			
		

	





	

		

			

				
					
前端之路：js跨页面传参(H5 web storage)

				
			

			

				

					qq_33368846的博客
				

				

					01-02
					
					3000
					
				

			

		

		

			
				
一、URL（传统）

把参数值附在url后面传递到其他页面,

这种方法不适合在后台 iframe 这种 tab 页面直接跳转传参，iframe 标签写死了。页面虽然刷新了，但是接受的url参数是第一次打开时候的参数。



二、H5 web storage

1、sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束...

			
		

	





	

		

			

				
					
利用H5本地存储localStorage、sessionStorage

				
			

			

				

					
				

				

					03-21
					
					206
					
				

			

		

		

			
				
　　最近的业务处理上，要使用cookie缓存储一下数据，公司的cookie还搞出点问题。而用户的浏览器都是利用微信的内置，普遍支持h5的本地存储。于是利用了这个...
　　现代浏览器普遍开始支持H5本地存储，localStorage、sessionStorage。可以用来代替cookie的一部分存储功能，他比cookie存储量更大。比较实用。
　　两者用法类似。localStorag...

			
		

	





	

		

			

				
					
sessionStorage实现两个页面传值和页面位置定位

				
			

			

				

					alokka的博客
				

				

					07-10
					
					2872
					
				

			

		

		

			
				
前言：　　因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求，对于原生APP来说轻而易举，毕竟自己的APP用户操作指哪打哪，但是H5该怎么做?H5就实现不了么？对于一个爱研究攻克这些前端棘手问题的我来说，我没尝试过，我是拒绝对提出需求者说实现不了，做不到之类的。　　是什么需求呢？–需求方要求用户在一个列表页浏览时，点击一个列表进入详情页，返回要求记录用户刚刚浏览的位置，而不是重新刷新页面到了页

			
		

	





	

		

			

				
					
Vue中使用Vuex+sessionStorage实现不同页面之间传参

				
			

			

				

					lj940628的博客
				

				

					03-19
					
					4189
					
				

			

		

		

			
				
1. 使用场景
最近公司产品项目逻辑层变多了，涉及到页面间的传参的参数会很多，而且页面之间跳转频繁。
之前参考了一篇文章，使用过，有一定的参考价值，此处贴出链接，大家可以参考一下 通过bus和watch监控$route结合进行路由之间的数据传递
由于项目变得越来越复杂，使用这个办法会很麻烦，也会出现一些刷新时参数丢失的问题，所以就把整体的传参方式改成了vuex+sessionStorage，这个方...

			
		

	





	

		

			

				
					
五种方法实现跨页面传值技巧

				
			

			

				

					
				

			

		

		

			
				
在进行Web开发时，跨页面传值是一个常见的需求，它允许开发者在不同的页面间传递数据。实现这一功能的方式有多种，本篇将详细探讨五种基本的跨页面传值方法，以便于开发者根据不同的场景选择最合适的实现方式。  一...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值