前段跨页面传值SessionStorage

最新推荐文章于 2025-08-05 10:22:15 发布
原创 最新推荐文章于 2025-08-05 10:22:15 发布 · 1.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何将JSON格式的对象存储到浏览器的sessionStorage中，并提供了具体的JavaScript代码示例。同时，文中也提到了该方法的局限性和潜在风险。 
//将对象存在浏览器中
		var project = $("#project-list").datagrid("getSelected");
		var str = JSON.stringify(project); //转为json格式字符串//注:sessionStorage._______后面名字不要重复 若名字重复则可能替代其中的值
			sessionStorage.project = str;//存入浏览器sessionStorage
var  s = sessionStorage.project;//从sessionStorage得到数据  （json格式对象）



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




                

        

    



  



    



                



	

		

			

				
					
前端面试汇总-React

				
			

			

				

					分享前端工程化、动效魔法与性能之舞！
				

				

					06-29
					
					1718
					
				

			

		

		

			
				
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event

			
		

	



                

            
              



	

		

			

				
					
----- 前端面试题 -----

				
			

			

				

					weixin_53170812的博客
				

				

					07-30
					
					821
					
				

			

		

		

			
				
HTML5新增的元素

首先html5为了更好的实践web语义化，增加了header，footer，nav,aside,section等语义化标签，在表单方面，为了增强表单，为input增加了color，emial,data ,range等类型，在存储方面，提供了sessionStorage，localStorage,和离线存储，通过这些存储方式方便数据在客户端的存储和获取，在多媒体方面规定了音频和视频元素audio和vedio，另外还有地理定位，canvas画布，拖放，多线程编程的web worker和w

			
		

	



              


  
              

                


	

		

			

				
					
sessionStorage跨页面通信

				
			

			

				

					Little_fairy_lzx的博客
				

				

					03-09
					
					2915
					
				

			

		

		

			
				
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
					
					370
					
				

			

		

		

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

			
		

	



		

			
		



	

		

			

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

				
			

			

				

					12-14
				

			

		

		

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

if (typeof(Storage) 

			
		

	





	

		

			

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

				
			

			

				

					weixin_43837305的博客
				

				

					09-23
					
					9242
					
				

			

		

		

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

			
		

	





	

		

			

				
					
前端页面之间的传值

				
			

			

				

					m0_63467982的博客
				

				

					02-23
					
					1030
					
				

			

		

		

			
				
有两种方法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...

			
		

	





	

		

			

				
					
html页面互相传值的问题解决方案

				
			

			

				

					09-28
				

			

		

		

			
				
cookies、localStorage和sessionStorage则是客户端存储数据的方式，适用于在同源策略允许的情况下跨页面共享数据，而服务器端的session则可以跨域管理用户状态，但需要服务器支持。  总的来说，HTML页面之间的值传递...

			
		

	





	

		

			

				
					
js 跳转页面

				
			

			

				

					04-12
				

			

		

		

			
				
引用[3]展示了一个页面跳转传值的例子，使用sessionStorage来传递数据。虽然用户的问题主要是跳转方法，但这个例子可能对需要传值的情况有帮助，可以作为补充内容。  现在需要将这些信息整合成一个清晰的回答。按照...

			
		

	





	

		

			

				
					
Spring Boot + Vue 开发部署全过程记录

				
			

			

				

					季秀的博客
				

				

					04-27
					
					2186
					
				

			

		

		

			
				
前后端开发分离，部署 All in one jar
前后端分离
前后端分离的开发模式不同于以往严重依赖后端的模式，前者使得前端更加“智能”，能做的事情更多，后端只需要作为一个能回答问题的服务即可。前后端分离模式一般是基于单页应用（SPA-Single Page Application）。单页应用在第一次访问服务器时，就将整个应用涉及到的“所有页面”都发往前端，后续和服务器的交互只是涉及数据的往来，...

			
		

	





	

		

			

				
					
sessionstorage和localstorage能操控不同网页之间的数据吗

				
			

			

				

					iouytrep的博客
				

				

					11-23
					
					404
					
				

			

		

		

			
				
Session Storage 和 Local Storage 都是存储在浏览器本地的，但它们对于不同的网页是隔离的，每个网页只能访问到自己的 Session Storage 和 Local Storage。因此，不同的网页不能共享同一个 Session Storage 和 Local Storage 中的数据。

			
		

	





	

		

			

				
					
sessionStorage不能跨窗口取值

				
			

			

				

					BluerCat的博客
				

				

					07-20
					
					2894
					
				

			

		

		

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

...

			
		

	





	

		

			

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

				
			

			

				

					huanlesyaya的博客
				

				

					12-25
					
					1217
					
				

			

		

		

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

// 从 sessionStorage...

			
		

	





	

		

			

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

				
			

			

				

					九段刀客的博客
				

				

					12-04
					
					3265
					
				

			

		

		

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

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

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

			
		

	





	

		

			

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

				
			

			

				

					qq_25416827的博客
				

				

					04-22
					
					932
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					afei199106的博客
				

				

					04-24
					
					877
					
				

			

		

		

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

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

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

			
		

	





	

		

			

				
					
同一浏览器跨页面通信

					
最新发布

				
			

			

				

					zmy967131的博客
				

				

					08-05
					
					233
					
				

			

		

		

			
				
同一浏览器跨页面通信方案

			
		

	





	

		

			

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

				
			

			

				

					m0_46335802的博客
				

				

					05-25
					
					678
					
				

			

		

		

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

			
		

	





	

		

			

				
					
前端 跨页面使用后端获取的数据 -- 知识砂砾

				
			

			

				

					AzusaShippo的博客
				

				

					10-27
					
					413
					
				

			

		

		

			
				
今天做的项目中分配了一些前端任务给我 其中有一个将标签页的头设计成动态的 结果我看到了后端返回给了我的数组中是有我想要的数据的 结果确获取不到 (源代码很长很乱)然后学到了这个方法 通过sessionStorage.setItem 将想要的数据存储在 本地会话阈中。sessionStorage.setItem('名称',想存的数据的获取方式)然后用到时候sessionStorage.getItem('名称即可使用')

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值