谈谈localStorage以及跟session的区别_将用户信息存到localstorage与session中的区别-CSDN博客

本文链接：https://blog.csdn.net/Acc13959255444/article/details/109304725

在一次创作登录界面项目中，在点击登录事件中，是需要跳转页面，以及将数据（用户名&密码）传到第二个页面进行渲染，也就是今天来聊聊localStorage的方法。

故事由来

在这里插入图片描述
跳转登录页面渲染 ——————————

实现思路

第一种方法：让后端生成一个接口，在跳转页面后可以请求到数据。（理论上，这个方法是可以实现的，但是如果后端有脾气，不给你写，你也只能跟后端大眼瞪小眼，所以求人不如求己，看看第二种方法）
前端也有前端的技术，利用h5新特性localstorage进行本地缓存，第二个页面接收数据并进行渲染。

实现方法

在博客里，我写两个大道至简的demo让大家参考，学习！

1、登录界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录界面</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="box">
		        <input type="text" placeholder="输入帐号" v-model='msg.login'></input>
		        <input type="text" placeholder="输入密码" v-model='msg.pass'></input>
		        <p><a href="b.html" @click='send'>点击跳转页面并传递值</a></p>
		        <p>{{msg.login}}==={{msg.pass}}</p>
		    </div>
	</body>
	<script>
		var vm = new Vue({
		        el:'#box',
		        data:{
		            msg:{
		                login:'',
		                pass:''
		            }
		        },
		        methods:{
		            send(){
		                if (!window.localStorage) {
		                    alert('浏览器支持localStorage')
		                }else{
							// 数据转换成JSON
		                    var datas = JSON.stringify(this.msg);
							// 浏览器储存数据
		                    window.localStorage.setItem("data",datas);
		                }
		            }
		        }
		    })
	</script>
</html>`

2、跳转页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>跳转页面</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="box">
				<p >{{jsonobj.login}}</p>
				<p >{{jsonobj.pass}}</p>
		</div>
	</body>
	<script type="text/javascript">
	    var vm = new Vue({
	        el:'#box',
	        data(){
				return{
					login:'',
					pass:''
				}
			},
	        methods:{

	        },
	        created(){
	            if (!window.localStorage) {
	                alert("浏览器支持localstorage");
	            }else{
					// 接收数据
	                var json=window.localStorage.getItem("data");
					// 数据转换成一个对象
					var jsonObj=JSON.parse(json);
					// 赋值
					this.jsonobj = jsonObj
	            }
			}
	    })
	</script>
</html>

3、运行结果如下：
在这里插入图片描述

window localStorage属性

相对于cookie的升级版，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage可支持5M的传输，将数据存储到本地上，在其他页面便可以接收到缓存，可进行请求数据以及渲染。
localStorage的值类型为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换。（将数据转化为对象 ->实现代码 JSON.parse()，将对象转化为字符串string-> 实现代码JSON.stringify）
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
localStorage 属性是只读的。