前端單頁應用在頁面刷新後保留數據的解決方案

前端在開發單頁應用(spa)的時候總會遇到頁面之間傳遞參數的狀況，在通常的狀況下對於數據的傳遞，咱們能夠用vuex，redux等中心化的狀態管理方案。但今天要講的是一種特殊的狀況: 頁面刷新致使傳遞的參數丟失。

如何在頁面刷新的時候保留數據?

1.路由傳參

我想到的第一種方案是路由傳參，在Vue項目裏，路由插件vue-router提供了兩種傳遞參數的方法：params和query。具體的使用方式這裏不詳細展開，不懂的能夠去看vue-router的文檔。params和query傳參，其路由展示形式是不同的：

// params 傳參
 test.com/page/123
 
 // query 傳參
 test.com/page?id=123&age=23
複製代碼

從demo裏能夠看到vue-router會將參數直接放到頁面的url裏，當用戶刷新頁面的時候，url並不會改變，因此傳遞的參數也不會變。獲取參數的方法也很簡單：

// params 獲取路由參數
const { id } = this.$route.params

// query 獲取路由參數
const { id, age } = this.$route.query
複製代碼

將參數放到路由裏來傳遞，確實是一個不錯的方案，但這種方案有缺點。瀏覽器對url的長度是有限制的（不一樣的瀏覽器限制不一樣），若是咱們要傳的參數在url裏的長度超出了瀏覽器的限制就會出現問題。

2.sessionStorage

第二種方案是使用sessionStorage,sessionStorage是前端數據可持久化的一種方案，其餘的還有localStorage，cookie，indexDB，ServiceWork。當頁面跳轉的時候，將須要傳遞的參數存入sessionStorage裏。

const data = {id: 123, age: 23}; // 須要傳遞的參數

// sessionStorage存值
sessionStorage.setItem('_data', JSON.stringify(data));

// sessionStorage取值
JSON.parse(sessionStorage.getItem('_data'));
複製代碼

可能有同窗會問，爲何不用localStorage和剩下的幾種方式。由於sessionStorage裏的數據會隨着頁面的關閉而銷燬，而localStorage裏的數據是不會隨着頁面的關閉而銷燬的，這樣的話隨着項目的迭代，使用localStorage的地方愈來愈多，存儲的數據量會愈來愈大致使超出瀏覽器限制的5M存儲空間，並且sessionStorage還能夠規避XSS攻擊，避免敏感信息的泄露。其餘幾種存儲方式就不介紹了，畢竟不是本文的重點，感興趣的能夠本身去了解。

3.總結

使用sessionStorage也是有缺點的，若是用戶拷貝了當前頁面的路由，在另外一個瀏覽器裏打開頁面，這樣就不能獲取到從上一個頁面傳遞過來的參數了。以上兩種方案都有優缺點，在使用的時候須要根據具體的場景選擇合適的方案。