在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("----------深拷贝结束----------")
