谈谈localStorage以及跟session的区别
在一次创作登录界面项目中，在点击登录事件中，是需要跳转页面，以及将数据（用户名&密码）传到第二个页面进行渲染，也就是今天来聊聊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 属性是只读的。
localStorage 与 sessionStorage 的唯一一点区别
localStorage 属于永久性存储，而 sessionStorage 属于当会话结束的时候，sessionStorage 中的键值对会被清空。