谈谈localStorage以及跟session的区别

·  阅读 173

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

故事由来

                           

————————————————————————————————

跳转登录页面渲染  

实现思路

  1. 第一种方法:让后端生成一个接口,在跳转页面后可以请求到数据。(理论上,这个方法是可以实现的,但是如果后端有脾气,不给你写,你也只能跟后端大眼瞪小眼,所以求人不如求己,看看第二种方法)
  2. 前端也有前端的技术,利用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属性

优势:

  1. 相对于cookie的升级版,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage可支持5M的传输,将数据存储到本地上,在其他页面便可以接收到缓存,可进行请求数据以及渲染。

  2. localStorage的值类型为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换。(将数据转化为对象 -> 实现代码 JSON.parse(),将对象转化为字符串string-> 实现代码JSON.stringify)

  3. localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。

  4. localStorage 属性是只读的。

localStorage 与 sessionStorage 的唯一一点区别

localStorage 属于永久性存储,而 sessionStorage 属于当会话结束的时候,sessionStorage 中的键值对会被清空。

结语:欢迎大家交流和点评。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改