前端本地存储

localStorage 本地存储

设置

lacalStorage.setItem('username','zxy');

获取

localStorage.getItem('username');

删除

localStorage.remove('username');

一次清除所有存储

localStorage.clear();

特点：

• 生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

• 存储的信息在同一域中是共享的。

• 当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件。

• 大小：据说是5M（跟浏览器厂商有关系）

• 在非IE下的浏览中可以本地打开。IE浏览器要在服务器中打开。

• localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

• localStorage受同源策略的限制

sessionStorage 会话本地存储

设置：

sessionStorage.setItem("signoutShow",this.signoutShow);
 
获取：
this.signoutShow = sessionStorage.getItem('signoutShow');

特点：

用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁，或者在新窗口打开同源的另一个页面，sessionStorage也是没有的

vue中由于页面刷新会导致有些参数被清空，用sessionStorage存储数据一般是在 beforeMount() 挂载前取， beforeUpdate() 更新渲染时存：

  beforeMount() {
    this.signoutShow = sessionStorage.getItem('signoutShow');
  },
  beforeUpdate() {
    sessionStorage.setItem("signoutShow",this.signoutShow);
  }

【注】sessionStorage 存储数据一般为对象，当存储值为 true/false 时，会发现存取都可以得到正确的值，但是页面渲染的结果不对，这是因为存储的类型为字符串类型，而 true/false 为bool 类型， sessionStorage.getItem('signoutShow'); 取值的时候会得到带引号的值，比如说"true" / "false" ，那么这时候就需要用 JSON.parse 转换一下类型就好了

  beforeMount() {
    var signoutBool = sessionStorage.getItem('signoutShow');
    this.signoutShow = JSON.parse(signoutBool);
  }

 

 

storage事件

当storage发生改变的时候触发。

注意：当前页面对storage的操作会触发其他页面的storage事件。

事件的回调函数中有一个参数event,是一个StorageEvent对象，提供了一些实用的属性,如下表：

Property	Type	Description
key	String	The named key that was added, removed, or moddified
oldValue	Any	The previous value(now overwritten), or null if a new item was added
newValue	Any	The new value, or null if an item was added
url/uri	String	The page that called the method that triggered this change