在vue項目中用vuex來做全局的狀態管理， 發現當刷新網頁后，保存在vuex實例store里的數據會丟失。
原因：
因為store里的數據是保存在運行內存中的,當頁面刷新時，頁面會重新加載vue實例，store里面的數據就會被重新賦值初始化
解決思路：
將state的數據保存在localstorage、sessionstorage或cookie中（三者的區別），這樣即可保證頁面刷新數據不丟失且易於讀取。
- localStorage: localStorage的生命周期是永久的，關閉頁面或瀏覽器之后localStorage中的數據也不會消失。localStorage除非主動刪除數據，否則數據永遠不會消失。
- sessionStorage:sessionStorage的生命周期是在僅在當前會話下有效。sessionStorage引入了一個“瀏覽器窗口”的概念，sessionStorage是在同源的窗口中始終存在的數據。只要這個瀏覽器窗口沒有關閉，即使刷新頁面或者進入同源另一個頁面，數據依然存在。但是sessionStorage在關閉了瀏覽器窗口后就會被銷毀。同時獨立的打開同一個窗口同一個頁面，sessionStorage也是不一樣的。
- cookie:cookie生命期為只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。 存放數據大小為4K左右,有個數限制（各瀏覽器不同），一般不能超過20個。缺點是不能儲存大數據且不易讀取。
由於vue是單頁面應用，操作都是在一個頁面跳轉路由，因此sessionStorage較為合適,原因如下：
- sessionStorage可以保證打開頁面時sessionStorage的數據為空；
- 每次打開頁面localStorage存儲着上一次打開頁面的數據，因此需要清空之前的數據。
vuex中state數據的修改必須通過mutation方法進行修改，因此mutation修改state的同時需要修改sessionstorage,問題倒是可以解決但是感覺很麻煩，state中有很多數據，很多mutation修改state就要很多次sessionstorage進行修改，既然如此直接用sessionstorage解決不就行了，為何還要用vuex多此一舉呢？
vuex的數據在每次頁面刷新時丟失，是否可以在頁面刷新前再將數據存儲到sessionstorage中呢，是可以的，beforeunload事件可以在頁面刷新前觸發，但是在每個頁面中監聽beforeunload事件感覺也不太合適，那么最好的監聽該事件的地方就在app.vue中。
- 在app.vue的created方法中讀取sessionstorage中的數據存儲在store中，此時用vuex.store的replaceState方法，替換store的根狀態
- 在beforeunload方法中將store.state存儲到sessionstorage中。
代碼如下：
export default { name: 'App', created () { //在頁面加載時讀取sessionStorage里的狀態信息 if (sessionStorage.getItem("store") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store")))) } //在頁面刷新前將vuex里的信息保存到sessionStorage里 window.addEventListener("beforeunload",()=>{ sessionStorage.setItem("store",JSON.stringify(this.$store.state)) }) } }
注方法說明：
（1）sessionStorage
使用 sessionStorage 創建一個本地存儲的 name/value 對，name="lastname" value="Smith", 然后檢索 "lastname" 的值，並插入到 id="result" 的元素上:
// 存儲 sessionStorage.setItem("lastname", "Smith"); // 檢索 document.getElementById("result").innerHTML = sessionStorage.getItem("lastname");
定義和使用
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲 key/value 對的數據。
sessionStorage 用於臨時保存同一窗口(或標簽頁)的數據，在關閉窗口或標簽頁之后將會刪除這些數據。
提示: 如果你想在瀏覽器窗口關閉后還保留數據，可以使用 localStorage 屬性， 該數據對象沒有過期時間，今天、下周、明年都能用，除非你手動去刪除。
語法：
window.sessionStorage
保存數據語法：
sessionStorage.setItem("key", "value");
讀取數據語法：
var lastname = sessionStorage.getItem("key");
刪除指定鍵的數據語法：
sessionStorage.removeItem("key");
刪除所有數據：
sessionStorage.clear();
（2）localStorage
使用 localStorage 創建一個本地存儲的 name/value 對，name="lastname" value="Smith", 然后檢索 "lastname" 的值，並插入到 id="result" 的元素上:
// 存儲 localStorage.setItem("lastname", "Smith"); // 檢索 document.getElementById("result").innerHTML = localStorage.getItem("lastname");
定義和使用
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲 key/value 對的數據。
localStorage 用於長久保存整個網站的數據，保存的數據沒有過期時間，直到手動去刪除。
localStorage 屬性是只讀的。
語法
window.localStorage
保存數據語法：
localStorage.setItem("key", "value");
讀取數據語法：
var lastname = localStorage.getItem("key");
刪除數據語法：
localStorage.removeItem("key");
(3)Object.assign()
一、其用於對象的拷貝
Object.assign() 方法用於將所有可枚舉屬性的值從一個或多個源對象復制到目標對象。它將返回目標對象。 Object.assign(target, ...sources) 【target：目標對象】，【souce：源對象（可多個）】 舉個栗子： const object1 = { a: 1, b: 2, c: 3 }; const object2 = Object.assign({c: 4, d: 5}, object1); console.log(object2.c, object2.d); console.log(object1) // { a: 1, b: 2, c: 3 } console.log(object2) // { c: 3, d: 5, a: 1, b: 2 } 注意： 1.如果目標對象中的屬性具有相同的鍵，則屬性將被源對象中的屬性覆蓋。后面的源對象的屬性將類似地覆蓋前面的源對象的屬性 2.Object.assign 方法只會拷貝源對象自身的並且可枚舉的屬性到目標對象。該方法使用源對象的[[Get]]和目標 對象的[[Set]]，所以它會調用相關 getter 和 setter。因此，它分配屬性，而不僅僅是復制或定義新的屬性。如 果合並源包含getter，這可能使其不適合將新屬性合並到原型中。為了將屬性定義（包括其可枚舉性）復制到 原型，應使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。
二、Object.assign()對象的深拷貝
針對深拷貝，需要使用其他辦法，因為 Object.assign()拷貝的是屬性值。假如源對象的屬性值是一個對象的引用，那么它也只指向那個引用。 let obj1 = { a: 0 , b: { c: 0}}; let obj2 = Object.assign({}, obj1); console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} obj1.a = 1; console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} obj2.a = 2; console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}} obj2.b.c = 3; console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}} console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}} 最后一次賦值的時候，b是值是對象的引用，只要修改任意一個，其他的也會受影響 // Deep Clone （深拷貝） obj1 = { a: 0 , b: { c: 0}}; let obj3 = JSON.parse(JSON.stringify(obj1)); obj1.a = 4; obj1.b.c = 4; console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
3、對象的合並
const o1 = { a: 1 }; const o2 = { b: 2 }; const o3 = { c: 3 }; const obj = Object.assign(o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 } console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目標對象自身也會改變。 其實就是對象的拷貝，o1就是目標對象，后面的是源對象，后面的屬性等會拷貝到目標對象
4、合並具有相同屬性的對象
const o1 = { a: 1, b: 1, c: 1 }; const o2 = { b: 2, c: 2 }; const o3 = { c: 3 }; const obj = Object.assign({}, o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 } 1.屬性被后續參數中具有相同屬性的其他對象覆蓋。 2.目標對象的屬性與源對象的屬性相同，源的會覆蓋目標的屬性
5.繼承屬性和不可枚舉屬性是不能拷貝
const obj = Object.create({foo: 1}, { // foo 是個繼承屬性。 bar: { value: 2 // bar 是個不可枚舉屬性。 }, baz: { value: 3, enumerable: true // baz 是個自身可枚舉屬性。 } }); 創建對象時，如果沒有設置enumerable的值，默認為false（不可枚舉屬性），設置為true，則為可枚舉屬性 const copy = Object.assign({}, obj); console.log(copy); // { baz: 3 }
6.原始類型會被包裝為對象
const v1 = "abc"; const v2 = true; const v3 = 10; const v4 = Symbol("foo") const obj = Object.assign({}, v1, null, v2, undefined, v3, v4); // 原始類型會被包裝，null 和 undefined 會被忽略。 // 注意，只有字符串的包裝對象才可能有自身可枚舉屬性。 console.log(obj); // { "0": "a", "1": "b", "2": "c" }
7.異常會打斷后續拷貝任務
const target = Object.defineProperty({}, "foo", { value: 1, writable: false }); // target 的 foo 屬性是個只讀屬性。 Object.assign(target, {bar: 2}, {foo2: 3, foo: 3, foo3: 3}, {baz: 4}); // TypeError: "foo" is read-only // 注意這個異常是在拷貝第二個源對象的第二個屬性時發生的。 console.log(target.bar); // 2，說明第一個源對象拷貝成功了。 console.log(target.foo2); // 3，說明第二個源對象的第一個屬性也拷貝成功了。 console.log(target.foo); // 1，只讀屬性不能被覆蓋，所以第二個源對象的第二個屬性拷貝失敗了。 console.log(target.foo3); // undefined，異常之后 assign 方法就退出了，第三個屬性是不會被拷貝到的。 console.log(target.baz); // undefined，第三個源對象更是不會被拷貝到的。
（4）JSON.stringify()與JSON.parse()
例子1，json.pase轉字符串為對象
let str = '{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}' let str_to_obj = JSON.parse(str); console.log(str); console.log("str的類型:"+typeof(str)); console.log(str_to_obj); console.log("str_to_obj的類型:"+typeof(str_to_obj));
json.parse會把字符串轉為對象格式返回出去，不會改變原對象的類型。
例子2，stringify轉對象為字符串
let obj = {"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}} let obj_to_str = JSON.stringify(obj) console.log("obj調用stringify后的類型:"+typeof(obj)) console.log("obj_to_str的類型:"+typeof(obj_to_str))
json.stringfy會把目標對象轉為字符串格式返回，不會改變原對象屬性；
例子3，利用pase，stringify實現對象的深拷貝
（1）先看個淺拷貝例子
let obj1 = {name:'豬八戒',age:'18'} console.log("----------淺拷貝開始----------") let obj2 = obj1; obj2.name = '孫悟空'; console.log(obj1) console.log(obj2) console.log("obj2===obj1:"+(obj1 === obj2))
（2）深拷貝
//利用pase，stringify實現對象的深拷貝 let obj1 = {name:'豬八戒',age:'18'} console.log("----------深拷貝開始----------") let obj2 = JSON.parse(JSON.stringify(obj1)) obj2.name = '孫悟空'; console.log(obj1) console.log(obj2) console.log("obj2===obj1:"+(obj1 === obj2)) console.log("----------深拷貝結束----------")
