localStorage & sessionStoragelocalStorage 数据存储也是跨浏览器会话。数据存储在

localStorage 数据存储也是跨浏览器会话。数据存储在 localStorage 是无期限的，而当页面会话结束——也就是说当页面被关闭时,数据存储在 sessionStorage 会被清除。

常用的四个 API 也很简单：

// 增加了一个 localStorage ‘myCat’ 数据项
localStorage.setItem('myCat', 'Tom');
 
// 读取 localStorage ‘myCat’ 数据项
let cat = localStorage.getItem('myCat');
 
// 移除 localStorage ‘myCat’ 数据项
localStorage.removeItem('myCat');
 
// 移除所有的 localStorage 数据项
localStorage.clear();

localStorage 对象和 Storage 对象

首先来说说 Storage 对象，Storage 提供了访问特定域名下的会话存储（session storage）或本地存储（local storage）的功能，例如，可以添加、修改或删除存储的数据项。

Storage 对象通过 Window.sessionStorage 和 Window.localStorage 属性使用（更确切的说，在支持的浏览器中 Window 对象实现了 WindowLocalStorage 和 WindowSessionStorage 对象并挂在其 localStorage 和 sessionStorage 属性下）—— 调用其中任一对象会创建相应的 Storage 对象，通过 Storage 对象，可以设置、获取和移除数据项。对于每个源（origin）sessionStorage 和 localStorage 使用不同的 Storage对象——独立运行和控制。

有点绕口是吧？我们说的直接一点。 localStorage 对象其实就是 Storage 对象的实例对象。我们可以在 Firefox 的开发者工具的控制台(Console)面板中输入 Storage，localStorage，查看这两个对象，再输入 localStorage instanceof Storage 或者 localStorage.constructor == Storage 查看这两个对象的关系

Chrome 控制台(Console)面板中输入 Storage 看不到内容，但是原理是一样的

我们可以看出 localStorage 是 Storage 对象的实例对象！

那么这就和我们所理解的JavaScript 实例对象和原型继承完全是同一套逻辑了，是吧？也就是说我们接下来可以和我们自己编写的实例对象一样，随意使用 localStorage 对象。

localStorage 一些不为人知的方法

上面已经说过的，我们熟知的 localStorage.setItem()，localStorage.getItem()，localStorage.removeItem()，localStorage.clear() 方法我们不再赘述。

访问和设置数据

localStorage 对象是简单的键值存储，类似于对象。键和值始终是字符串。您可以像对象一样，使用点语法.或者中括号[]的形式访问这些值，也可以使用 localStorage.getItem() 和 localStorage.setItem() 方法访问或者设置这些值。下面的代码是等价的：

// 设置值
localStorage.myCat = 'Tom'; 
localStorage['myCat'] = 'Tom'; 
localStorage.setItem('myCat', 'Tom');
 
// 获取值
localStorage.myCat;            // 'Tom' 
localStorage['myCat'];         // 'Tom' 
localStorage.getItem('myCat'); // 'Tom'

我一般都使用点语法，但是官方建议使用 setItem, getItem, removeItem 这些API，来防止与使用普通对象作为键值存储相关的[陷阱］(2ality.com/2012/01/obj…)

使用 localStorage.hasOwnProperty() 检查 localStorage 中存储的数据里是否保存某个值

hasOwnProperty() 方法检查对象自身属性中是否具有指定的属性，返回一个布尔值。换句话说就是检查 localStorage 中存储的数据里是否保存某个值。

假设，我们得本地存储了 myCat 数据，没存 youCat 数据。之前你要判断本地是否存储了 youCat 数据，你可能需要这么做

localStorage.getItem('youCat')

有了 hasOwnProperty() 方法就简单多了

localStorage.hasOwnProperty('myCat')  // true
localStorage.hasOwnProperty('youCat') // false

Object.keys(localStorage) 查看 localStorage 中存储数据所有的键

想知道 localStorage 中存储了哪些值，我们可以直接使用 Object.keys(localStorage) 查看，很方便。

localStorage.key(index) 方法

读取第 index 个数据的名字或键经常(从0开始索引)

localStorage.length 属性

localStorage 存储了多少个数据

storage 事件

当存储数据发生变化时，会触发 storage 事件。值得特别注意的是，该事件不在导致数据变化的当前页面触发。如果浏览器同时打开一个域名下面的多个页面，当其中的一个页面改变 sessionStorage 或 localStorage 的数据时，所有页面的storage事件会被触发。可以通过这种机制，实现多个窗口之间的通信。（当然 ie 这个特例除外，它包含自己本事也会触发 storage 事件）。例如我们全局下监听 storage 事件：

window.addEventListener('storage', () => {
  localStorage.clear();
  window.location = '/login.html';
});

localStorage & sessionStorage

localStorage 对象 和 Storage 对象