为什么要说到localStorage呢?因为我这个项目的首页点击搜索按钮的时候,是需要跳转页面,以及将数据在第二个页面进行请求数据并渲染。
我的思路有俩种:
1.点击搜索直接传给后台生成接口后在第二个页面调用接口接受!
2.直接在前端页面本地缓存,后在第二个页面获取!
为什么我要讲一下第二种,因为后端也是有脾气的,不给你写,你也是俩眼发呆没毛病。
先看一下效果图:
当我选择玩城市 日期 人数 后 点击搜索 是需要跳转页面的,这些我们输入的数据是不是需要传给后端,并请求数据呢?
我这边写了俩个 模仿的demo
a.html ⇒ b.html
我们把a.html 看作 输入内容页面,b.html接受页面,看一下我们的代码!
A页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/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 type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
msg:{
login:'',
pass:''
}
},
methods:{
send(){
if (!window.localStorage) {
alert('浏览器支持localStorage')
}else{
var storage=window.localStorage;
var data = JSON.stringify(this.msg);
storage.setItem("data",data);
console.log(storage.data);
}
}
}
})
</script>
</html>
B页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="box">
<h1>我是B页面</h1>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
},
methods:{
},
created(){
if (!window.localStorage) {
alert("浏览器支持localstorage");
}else{
var storage=window.localStorage;
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(jsonObj)
}
}
})
</script>
</html>
注意几点,我们传递的参数或者说是字符段,都是要以json为主,但是在我们的本地缓存中,它不认json,它会强行给你转成字符串,如果是这样的话 为了保持第二个页面,我们接受到的数据不会乱掉,我们可以自己给成json字符串形式,然后在本地的缓存一下,在第二个页面接收后,在转成我们的json类型就可以了。
A页面的分析:
storage.setItem(“data”,data) setItem就是传入本地值,第一个参数就是自定义的参数,第二个参数是我们传入的参数。传入参数后需要在我们的控制台看,直接上图:
B页面的分析:
在B页面只需要用一行代码接收即可storage.getItem(“data”) 这里的data要跟我们A页面第一个参数 一致。 然后我们转一下类型,在console一下就得到我们A页面输入的内容了。
添加一点内容:少了一个删除缓存内容 storage.removeItem(“data”)
好了!大家好我是杨小宝!感谢您的阅读!