前端传值问题(cookie,localstorage)

本文介绍了前端存储的两种常见方式——Cookie和localStorage,并提供了相关的方法封装。Cookie用于向后端传递信息,但容量较小,而localStorage则提供更大的存储空间,主要用于前端数据存储。在A页面,我们展示了如何使用工具方法操作Cookie和localStorage,而在B页面,通过localStorage进行数据读取并移除键值对以防止下次重复存储。两者的主要区别在于用途和存储容量,以及生命周期的不同。

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

来源 :b站 https://www.bilibili.com/video/BV1rp4y1t7Ks?p=73

1.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; i++){
		var str = arr[i];
		var k = str.split(operator)[0];
		var v = str.split(operator)[1];
		if(k == keyStr){
			value = v;
			break;
		}
	}
	return value;
}

function setCookieValue(key,value){
	document.cookie = key+operator+value;
}
  • A页面调用(前提要导入javascript工具包)
    在这里插入图片描述
  • B页面
    在这里插入图片描述

2.localstorage

自带方法

  • A页面(必须用json字符串设置值,要不然接收不到)
    在这里插入图片描述
  • B页面(移除键值对原因是防止下一次访问存值)
    在这里插入图片描述

3.区别

  • 最根本区别为cookie能向后端传值,而后者不能,专门用来存放前端的数据
  • cookie容量小,后者大
  • localStorage与sessionStorage最大区别为生命周期,前者更长。
前端开发中,图片之间可以通过多种方式实现,具体取决于你的应用场景和技术栈。以下是几种常见的方法: 1. **URL参数递**: 通过在图片的URL中添加查询参数来。这种方法适用于静态图片或需要通过URL递简单数据的情况。 ```html <img src="image1.jpg?param1=value1&param2=value2" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> ``` 2. **数据属性(data-attributes)**: 使用HTML5的数据属性来存储自定义数据。这种方法适用于需要在同一页面内的图片之间递数据的情况。 ```html <img src="image1.jpg" data-param1="value1" data-param2="value2" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> ``` 3. **JavaScript变量递**: 使用JavaScript变量来存储和递数据。这种方法适用于需要在不同图片之间进行复杂数据递的情况。 ```html <img src="image1.jpg" id="image1" alt="Image 1"> <img src="image2.jpg" id="image2" alt="Image 2"> <script> var data = { param1: 'value1', param2: 'value2' }; document.getElementById('image1').addEventListener('click', function() { // 处理数据并递给image2 document.getElementById('image2').dataset.param1 = data.param1; document.getElementById('image2').dataset.param2 = data.param2; }); </script> ``` 4. **使用Web存储(LocalStorage/SessionStorage)**: 通过Web存储来保存和递数据。这种方法适用于需要在不同页面或会话之间递数据的情况。 ```html <img src="image1.jpg" id="image1" alt="Image 1"> <img src="image2.jpg" id="image2" alt="Image 2"> <script> document.getElementById('image1').addEventListener('click', function() { localStorage.setItem('param1', 'value1'); localStorage.setItem('param2', 'value2'); }); document.getElementById('image2').addEventListener('load', function() { var param1 = localStorage.getItem('param1'); var param2 = localStorage.getItem('param2'); // 处理递的数据 }); </script> ``` 5. **使用Cookies**: 通过Cookies来存储和递数据。这种方法适用于需要在不同页面或会话之间递数据的情况。 ```html <img src="image1.jpg" id="image1" alt="Image 1"> <img src="image2.jpg" id="image2" alt="Image 2"> <script> document.getElementById('image1').addEventListener('click', function() { document.cookie = "param1=value1; path=/"; document.cookie = "param2=value2; path=/"; }); document.getElementById('image2').addEventListener('load', function() { var cookies = document.cookie.split('; '); var params = {}; for (var i = 0; i < cookies.length; i++) { var cookie = cookies[i].split('='); params[cookie[0]] = cookie[1]; } var param1 = params.param1; var param2 = params.param2; // 处理递的数据 }); </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值