浏览器中的JS-各种存储的使用

637 阅读4分钟

这是我参与11月更文挑战的第22天,活动详情查看:2021最后一次更文挑战

前言

上文简单学习了关于浏览器中的 JS 之 各种存储(一), 本文继续来学习浏览器中的 JavaScript - 存储(二)

通过前几篇文章我们学习记录了浏览器中的 JavaScript, 更多更文-各知识点小结-list:

浏览器中的 JavaScript - 存储(二)

上文对浏览器的几种存储概念及分类 做了简单总结: 如下几种

  1. 早期传统的 -> cookie
  2. 现代化的 -> 浏览器使用的 Web Storage API : 包括 sessionstorage 和 localstorage
  3. 现代化的 -> IndexedDB API
  4. 未来化的 -> Cache API

1. cookie

比如有些时候我们访问一些网站时会收到提醒消息: 询问是否会使用 cookies 来存储关于网站内的互动等数据

how-do-you-use-cookie?

2. Web Storage API

Web Storage API 提供了一种非常简单的语法,用于存储和检索较小的、由名称和相应值组成的数据项。当您只需要存储一些简单的数据时,比如用户的名字,用户是否登录,屏幕背景使用了什么颜色等等,这是非常有用的。

所有的 web storage 数据都包含在浏览器内两个类似于对象的结构中: sessionStorage 和 localStorage。通常第二种方法更有用, 也见的比较多

2.1 sessionstorage

sessionstorage 与存储它的脚本所属的浏览器窗口或标签页的生命期相同, 即关闭浏览器或标签页, sessionstorage 数据将被删除

只要浏览器开着,数据就会一直保存 (关闭浏览器时数据会丢失)

2.2 localstorage

而第二种 localstorage 会一直保存数据,甚至到浏览器关闭又开启后也是这样。

设置/访问/移除 Storage 存储的数据

要访问和设置一个 Web Storage, 我们可以通过在浏览器的 控制台输入下面示例代码在浏览器中进行保存数据:

保存一个数据存储项 setItem

通过 Storage.setItem() 方法允许您在存储中保存一个数据项: 它接受两个参数:数据项的名字及其值。浏览器 JavaScript 控制台输入:

localStorage.setItem('name', 'iwin621')

当我们设置好上面的字段后, 将浏览器关闭, 然后重新打开刚才的页面, 在控制台输入下面的代码, 则可以获取到 name 的值. 而通过 sessionStorage 设置的值则不存在了..

查询一个数据存储项 getItem

通过 Storage.getItem() 方法接受一个参数: 想要检索的数据项的名称, 并返回该数据项的值。浏览器 JavaScript 控制台输入代码:

let myName = localStorage.getItem('name')
myName // 'iwin621'

移除一个存储项 removeItem

通过 Storage.removeItem() 方法接受一个参数: 要删除的数据项的名称, 并从 web storage 中删除该数据项。在浏览器 JavaScript 控制台中输入以下代码:

localStorage.removeItem('name');
let myName = localStorage.getItem('name');
myName // 因为第一行已经将 name 移除, 则返回 null

SessionStorage 设置/读取/移除数据 同理.

相关更文阅读

  1. JavaScript 学习理解-Number-这是一个函数

  2. JS 学习理解-自动类型转换

  3. JavaScript 中的中缀运算符

  4. 你知道 JavaScript 的 typeof 是什么吗?

  5. 学习 JavaScript 中几个代表性事件(Event)

  6. 学习理解客户端 JavaScript-事件分类(一)

  7. 理解浏览器中的 JavaScript-事件注册

  8. 浏览器中的 JavaScript-fetch()网络请求方法

  1. HTTP 响应代码
  2. 浏览器中的 JS-WebSocket 通信(一)
  3. 学习浏览器中的 JS-WebSocket 发送接收消息(二)
  4. 学习浏览器中的 JS-存储的分类(一)

Calm Down & Carry On!

Buy Less by Know More!

学习, 记录, 积累 是一个漫长的痛苦过程! 也就是这个不断经历痛苦的锤炼, 让我们更加强大! 加油!

参考内容