都2022年了你还不知道Stronge本地存储么

前言：我们这篇主要是说JavaScript的本地存储web Storage，首先我们需要了解一下客户端存储的几种方式。

客户端存储的几种方式

1. cookie：最初用于在客户端存储会话信息，是在服务器响应http请求时，通过发送set-cookie给服务器，形成一个唯一识别，cookie中存储的信息只对被认可的接收者开放，不会被其他域访问。
2. web Storage：它提供在cookie之外的存储会话。并且可以永久性存储大量数据（5M）。它主要解决通过客户端存储不需要频繁发送服务器的数据请求。
3. IndexedDB：是类似于 SQL 数据库的结构化数据存储机制。不同的是，IndexedDB 存储的是对象，而不是数据表。对象存储是通过定义键然后添加数据来创建的。

web Stronge本地存储

Web Storage 定义了两个对象：localStorage 和 sessionStorage。

localStorage 是 永久存储机制，sessionStorage 是跨会话的存储机制。

这两种浏览器存储 API 提供了在浏览器中不受页面刷新影响而存储数据的两种方式。

最早之前是用的 过 globalStorage，不过目前 globalStorage 已废弃。

Storage

💡 Storage 类型存储的是键值对 key => vlaue

• clear()：删除所有值；不在 Firefox 中实现。
• getItem(name)：取得给定 name 的值。
• key(index)：取得给定数值位置的名称。
• removeItem(name)：删除给定 name 的名/值对。
• setItem(name, value)：设置给定 name 的值

创建 我们用localStorage举例， sessionStorage使用方法也是一样的

我们直接创建一个uname和age打开控制台点击 Application 然后点击local Storage就可以看到我们在本地存储的信息

localStorage.setItem('uname','jackson')
localStorage.setItem('age',22)

当我们切换浏览器打开这个网址，我们还会看到储存的信息。

删除

删除我们直接使用 localStorage.removeItem('key值')

localStorage.removeItem('uname') //删除

刚刚我们上面两个都是演示的存储单个数据，如果遇到很多数据的话，我们可以使用JSON字符串来进行存储。

利用JSON存储复杂数据

我们可以先创建个JSON字符串利用JSON.stringify(object)方法来转换成JSON字符串，这样我们可以看到存储的信息就有name和age

let object = {
  "uname":"jackson",
  "age":22,
  "like":"web"
}

localStorage.setItem('obj',JSON.stringify(object))

如果需要取到字符串中的值，我们直接使用getItem方法是不行的，这里我们打印一下，其实它是一个对象，不能让我们取到里面的值。

我们还需要进行转换，利用JSON.parse()方法把JSON字符串转换成Javascript的值，这样就能供我们使用了。

sessionStorage和localStorage的区别

sessionStorage：

生命周期: 用于本地存储一个会话 (session) 中的数据, 这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.

也就是说只要这个浏览器窗口 (当下浏览器的当前标签页) 没有关闭, 即使在同一标签页刷新页面或进入同源另一页面, 数据仍然存在. 关闭页面后, sessionStorage 即被销毁, 即在新窗口新页面打开同源的另一个页面, sessionStorage 也是没有的.

sessionStorage 除了协议, 主机名, 端口外, 还要求在同一窗口 (也就是浏览器的标签页) 下才能共享数据.

sessionStorage 能在单个标签页中进行同源页面跨页面访问, 用 sessionStorage 实现页面之间的数据传输, 不用向服务器发送请求, 不会泄露在用户使用的浏览器中, 一定程度上保证了数据的安全性.

localStorage：

localStorage 对象取代了 globalStorage，作为在客户端持久存储数据的机制。要访问同一个 localStorage 对象，页面必须来自同一个域（子域不可以）、在相同的端口上使用相同的协议。

两种存储方法的区别在于，存储在 localStorage 中的数据会保留到通过 JavaScript 删除或者用户清除浏览器缓存。localStorage 数据不受页面刷新影响，也不会因关闭窗口、标签页或重新启动浏览器而丢失。

使用场景

我们在很多后台管理页面中可以设置更改主题色，这个就是利用本地存储原理，将你选中的颜色存储在客户端中。

todolist 我们在学习各种小dome的时候经常会遇到todolist，我们也可以利用本地存储

总之：

适合长期保存在本地的数据（令牌），推荐使用localStorage

敏感账号一次性登录，推荐使用sessionStorage