localStorage本地缓存到第二个页面接收！--飞机票项目

来源：互联网发布：淘宝手机版下载安卓版编辑：程序博客网时间：2024/04/28 12:58

为什么要说到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”)

好了！大家好我是杨小宝！感谢您的阅读！

阅读全文

1 0