这是我参与11月更文挑战的第22天,活动详情查看:2021最后一次更文挑战
前言
上文简单学习了关于浏览器中的 JS 之 各种存储(一), 本文继续来学习浏览器中的 JavaScript - 存储(二)
通过前几篇文章我们学习记录了浏览器中的 JavaScript
, 更多更文-各知识点小结-list:
浏览器中的 JavaScript - 存储(二)
上文对浏览器的几种存储概念及分类 做了简单总结: 如下几种
- 早期传统的 -> cookie
- 现代化的 -> 浏览器使用的 Web Storage API : 包括 sessionstorage 和 localstorage
- 现代化的 -> IndexedDB API
- 未来化的 -> Cache API
1. cookie
比如有些时候我们访问一些网站时会收到提醒消息: 询问是否会使用 cookies
来存储关于网站内的互动等数据
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 设置/读取/移除数据 同理.
相关更文阅读
Calm Down & Carry On!
Buy Less by Know More!
学习, 记录, 积累 是一个漫长的痛苦过程! 也就是这个不断经历痛苦的锤炼, 让我们更加强大! 加油!