认识Storage

WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式：

localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留；

sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除；

localStorage和sessionStorage的区别

localStorage和sessionStorage看起来非常的相似，那么它们有什么区别呢？

关闭网页后重新打开，localStorage会保留，而sessionStorage会被删除；

在页面内实现跳转，localStorage会保留，sessionStorage也会保留；

在页面外实现跳转（打开新的网页），localStorage会保留，sessionStorage不会被保留；

页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。

在新标签或窗口打开一个页面时会复制顶级浏览会话的session作为新会话的session， 这点和 session cookies 的运行方式不同。

打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。

关闭对应浏览器窗口（Window）/ tab，会清除对应的sessionStorage。

Storage常见的方法和属性

Storage有如下的属性和方法：

属性：

Storage.length：只读属性

返回一个整数，表示存储在Storage对象中的数据项数量；

console.log(localStorage.length)
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i)
  console.log(localStorage.getItem(key))
}

方法：

Storage.key()：该方法接受一个数值n作为参数，返回存储中的第n个key名称；

console.log(localStorage.key(0))

Storage.getItem()：该方法接受一个key作为参数，并且返回key对应的value；

console.log(localStorage.getItem("age"))

Storage.setItem()：该方法接受一个key和value，并且将会把key和value添加到存储中。

如果key存储，则更新其对应的值；

localStorage.setItem("name", "sabo")
localStorage.setItem("age", 18)

Storage.removeItem()：该方法接受一个key作为参数，并把该key从存储中删除；

localStorage.removeItem("age")

Storage.clear()：该方法的作用是清空存储中的所有key；

localStorage.clear()

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，点击查看活动详情