1、localStorage、sessionStorage 和 Cookie 区别及用法

区别

localStorage:

localStorage 的生命周期是永久的，关闭页面或浏览器之后 localStorage 中的数据也不会消失。localStorage 除非主动删除数据，否则数据永远不会消失

sessionStorage:

sessionStorage 的生命周期是仅在当前会话下有效。sessionStorage 引入了一个“浏览器窗口”的概念，sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage 也是不一样的

cookie:

cookie生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右, 有个数限制（各浏览器不同），一般不能超过20个。缺点是不能储存大数据且不易读取

建议

由于 vue 是单页面应用，操作都是在一个页面跳转路由，因此 sessionStorage 较为合适

原因:

sessionStorage 可以保证打开页面时 sessionStorage 的数据为空

每次打开页面 localStorage 存储着上一次打开页面的数据，因此需要清空之前的数据

用法

一. localstorage 和 sessionstorage

1、首先要判断浏览器是否支持 localStorage / sessionStorage

比如判断 localStorage

if (window.localStorage) {
alert('浏览支持 localStorage');
} else {
alert('浏览暂不支持 localStorage');
}

2、localStorage 和 sessionStorage 都具有相同的操作方法，例如 setItem()、getItem() 和 removeItem() 等

储存数据
用途: 将 value 存储到 key 字段
用法: setItem( key, value)
代码示例

sessionStorage.setItem('key', 'value');
localStorage.setItem('key', 'value');

取出数据
用途: 获取指定 key 本地存储的值
用法: getItem(key)
代码示例

sessionStorage.getItem('key');
localStorage.getItem('key');

修改数据
用途: 修改指定 key 本地存储的值
用法: setItem(key)
代码示例

sessionStorage.setItem('key', 'newVal');
localStorage.setItem('key', 'newVal');

删除数据
用途: 删除指定 key 本地存储的值
用法: getItem(key)
代码示例

sessionStorage.removeItem('key');
localStorage.removeItem('key');

清除数据
用途: 清除所有本地存储的数据
用法: clear()
代码示例

sessionStorage.clear();
localStorage.clear();

二. cookie

储存数据

window.document.cookie = 'xxx';

取出数据

document.cookie

2、【原型和原型链】什么是原型和原型链

地址：https://blog.csdn.net/xiaoermingn/article/details/80745117

https://github.com/stone0090/javascript-lessons/tree/master/2.5-Prototype

一、原型

①所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象

②所有函数都有一个prototype(原型)属性，属性值是一个普通的对象

③所有引用类型的__proto__属性指向它构造函数的prototype

var a = [1,2,3];
a.__proto__ === Array.prototype; // true

二、原型链

当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

举例，有以下代码

function Parent(month){
this.month = month;
}
var child = new Parent('Ann');
console.log(child.month); // Ann
console.log(child.father); // undefined

在child中查找某个属性时，会执行下面步骤：

访问链路为：

①一直往上层查找，直到到null还没有找到，则返回undefined

②Object.prototype.__proto__ === null

③所有从原型或更高级原型中的得到、执行的方法，其中的this在执行时，指向当前这个触发事件执行的对象

3、vue生命周期：

beforeCreate（创建前）

介绍：实例初始化之后，组件被创建时，这时候 el，data，message 都是 underfined

created（创建后）

介绍：实例创建完成后，data、methods 被初始化

beforeMount（载入前）

介绍：完成el和data初始化，在挂载开始之前被调用。可以发送数据请求

mounted（载入后）

介绍：vue实例已经挂载到页面中

获取 el 中 DOM 元素，进行 DOM 操作；如果返回的数据操作依赖 DOM 完成，推荐这个时候发送数据请求

beforeUpdate（更新前）

介绍：数据更新时调用

挂载完成之前访问现有DOM，比如手动移除已添加的事件监听器；也可以进一步修改数据

updated（更新后）

介绍：由于数据更改，重新渲染时调用

可执行依赖与DOM的操作

beforeDestory（销毁前）

介绍：实例销毁之前调用

实例销毁之前，执行清理任务，比如：清除定时器等

destoryed（销毁后）

介绍：vue实例销毁后调用。调用后，Vue实例指示的所有东西都会被解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

提示已删除。

答：vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。在组件中具体的方法有:

1.什么是vue生命周期？有什么作用？

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗， 那我们最早可在mounted 中进行

2.vue生命周期的8个阶段？

1、beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法

2、create：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作

3、beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的

4、mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行

5、beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步

6、updated：页面显示的数据和data中的数据已经保持同步了，都是最新的

7、beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁

8、destroyed： 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。