原文地址：https://www.jianshu.com/p/c6cd14cc3fa4
頁面傳值
1 最常用的莫過於參數傳值
傳值是最好將字典，數組類型的 轉成json字符串比較好
JSON.stringify(item)
1 this.$router.push({ name: 'TripFlightDetail',//頁面名字 path:'/TripFlightDetail',//頁面路勁 和上面名字任意一個都可以 query: {flight: JSON.stringify(item)} // 參數傳值 }) 2 這種也可以 this.$router.push({ name: 'TripFlightDetail’, params: {flight: this.currentRecomd} // }) 然后到下一個頁面 的mounted()函數中取值
let flight = JSON.parse(this.$route.query.flight) // 取 有個問題需要注意：
如果在微信中 下面有 <- -> 前進返回 箭頭 就要用 name 這種方式push 下一個頁面是可以到下一個頁面，但是單按右箭頭返回時是返回不到先前界面的
因為它記錄的是頁面路勁，所以如果想要實現可以返回的界面切換最好要用 path 路徑來push
但是 query 傳值不能太多，太多的話在微信中會閃一下 消失掉 這時候就要用另一種方式了
緩存傳值
像全局變量： 只要存下，什么地方用什么地方取
//本地存
localStorage.setItem('trip',JSON.stringify(_this.currentRecomd)) this.$router.push({ name: 'HotelPage', //推頁面是這里就不需要傳值了 }) //用的時候取
let trip = JSON.parse(localStorage.getItem('trip')); //取 還有一個 sessionStorage 緩存傳值 和 localStorage的操作類似
但是兩者是有區別的：
WebStorage的目的是克服由cookie所帶來的一些限制，當數據需要被嚴格控制在客戶端時，不需要持續的將數據發回服務器。
WebStorage兩個主要目標：（1）提供一種在cookie之外存儲會話數據的路徑。（2）提供一種存儲大量可以跨會話存在的數據的機制。
HTML5的WebStorage提供了兩種API：localStorage（本地存儲）和sessionStorage（會話存儲）。
1、生命周期：localStorage:localStorage的生命周期是永久的，關閉頁面或瀏覽器之后localStorage中的數據也不會消失。localStorage除非主動刪除數據，否則數據永遠不會消失。
sessionStorage的生命周期是在僅在當前會話下有效。sessionStorage引入了一個“瀏覽器窗口”的概念，sessionStorage是在同源的窗口中始終存在的數據。只要這個瀏覽器窗口沒有關閉，即使刷新頁面或者進入同源另一個頁面，數據依然存在。但是sessionStorage在關閉了瀏覽器窗口后就會被銷毀。同時獨立的打開同一個窗口同一個頁面，sessionStorage也是不一樣的。
2、存儲大小：localStorage和sessionStorage的存儲數據大小一般都是：5MB
3、存儲位置：localStorage和sessionStorage都保存在客戶端，不與服務器進行交互通信。
4、存儲內容類型：localStorage和sessionStorage只能存儲字符串類型，對於復雜的對象可以使用ECMAScript提供的JSON對象的stringify和parse來處理
5、獲取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。
6、應用場景：localStoragese：常用於長期登錄（+判斷用戶是否已登錄），適合長期保存在本地的數據。sessionStorage：敏感賬號一次性登錄；
WebStorage的優點：
（1）存儲空間更大：cookie為4KB，而WebStorage是5MB；
（2）節省網絡流量：WebStorage不會傳送到服務器，存儲在本地的數據可以直接獲取，也不會像cookie一樣美詞請求都會傳送到服務器，所以減少了客戶端和服務器端的交互，節省了網絡流量；
（3）對於那種只需要在用戶瀏覽一組頁面期間保存而關閉瀏覽器后就可以丟棄的數據，sessionStorage會非常方便；
（4）快速顯示：有的數據存儲在WebStorage上，再加上瀏覽器本身的緩存。獲取數據時可以從本地獲取會比從服務器端獲取快得多，所以速度更快；
（5）安全性：WebStorage不會隨着HTTP header發送到服務器端，所以安全性相對於cookie來說比較高一些，不會擔心截獲，但是仍然存在偽造問題；
（6）WebStorage提供了一些方法，數據操作比cookie方便；
setItem (key, value) —— 保存數據，以鍵值對的方式儲存信息。
getItem (key) —— 獲取數據，將鍵值傳入，即可獲取到對應的value值。
removeItem (key) —— 刪除單個數據，根據鍵值移除對應的信息。
clear () —— 刪除所有的數據
key (index) —— 獲取某個索引的key
作者：藤王俊采
鏈接：https://www.jianshu.com/p/c6cd14cc3fa4
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。