js清空本地存储_JS原理、方法与实践 本地存储

最新推荐文章于 2023-10-31 17:28:39 发布
最新推荐文章于 2023-10-31 17:28:39 发布
阅读量1.1k 收藏 2
点赞数
文章标签： js清空本地存储 js自动触发onclick

本地存储就是指在浏览器中存储数据，是相对于服务器中存储数据来说的。

1. 本地存储的分类

浏览器的本地存储主要包括4种方式：Cookie、Storage、SQL数据库和IndexedDB。

Cookie

Cookie提出来得最早，其最初的设计目的只是为了保存用户的登录信息，所以并不适合保存大量数据。Cookie容量小，将保存的数据拼接成字符串的形式跟程序进行操作。没打开一个网址，浏览器都会将该网站下的所有Cookie数据全部传到服务器端，因为其最初的设计目的只是用来保护用户的登录信息(例如SessionId)。

Storage

Sotrage是HTML5中用于存储本地数据的对象，因为其设计目的就是存储本地数据，所以其操作比Cookie灵活得多。Storage容量比Cookie大，可以直接按照键值对存储数据并使用键名获取数据。Storage分为sessionStorage和localStorage,前者在浏览器关闭后就会被清除，后者会一直存储在浏览器中，除非人为或代码清除。

SQL数据库

SQL数据库在浏览器中封装了一个小型的SQLLite数据库，但是从前端架构上并不适合使用。例如：JS对象的属性随时都可能发生改变，可能增删，也可能修改数据类型，但是SQL数据库要求在对数据操作之前就先确定好数据的结构。

IndexedDB

IndexedDB属于一种noSQL数据库，是非结构化的，它所保存的数据记录跟JS的对象一样可以随时变化属性(字段)。与Storage相比，它可以保存更多的数据，而且还可以使用数据库的索引、事务等相关概念，但是使用起来要比Storage复杂不少。

2. Storage存储

Storage是window对象的一个function类型的属性对象，但是这个function对象比较特别，它既不可以当作方法来执行，也不可以用来创建实例对象，JS引擎会默认为创建两个Storage的实例对象，直接调用就可以了。JS引擎创建的两个Storage实例对象分别是sessionStorage和localStorage，前者用于暂时保存，浏览器关闭后数据就会丢失；后者用于长久保存，及时关闭浏览器数据也不会丢失。Storage.prototype: 51b73ccf2d73f7d482133d6c5b0a674a.png 操作数据的方法有：

  • getItem(key)

  • setItem(key, value)

  • removeItem(key)

  • clear()

在控制台利用session storage setItem设置一个值后可以在Application的Session Storage查看： aef6bc29ea0a42e67f887f2d2b841d91.png cfc0b820e56a4435bd109f7abe363e85.png

localStorage与sessionStorage在方法上使用相同，不同之处就在存储后数据清除方式不同。

3. StorageEvent

Storage实例对象修改数据的时候会触发一个StorageEvent事件，这个事件有些特别，当事件触发后，消息会发送到打开的所有当前网站的其他页面中(当然要在同一个浏览器中)，至于是否会发送给当前页面，不同的浏览器有不不同的处理方法。(个人测试以下几个浏览器行为均相同，不发送给当前页面：谷歌浏览器(85.0.4183.83)、(Microsoft Edge 44.18362.449.0)、Firefox(78.0.2 (64 位))、双核浏览器(版本 1.0.4.2)) StorageEvent.prototype: ecfabf3cd0f965319f6dfcdfb4181071.png

代码示例：

lang="en">

charset="UTF-8">

name="viewport" content="width=device-width, initial-scale=1.0">

Document

value="Test Storage" type="button" id='button'/>

const btn = document.querySelector('#button');

btn.onclick = () => {

localStorage.setItem('testKey', 'testValue1');

}

window.addEventListener('storage', function(e){

console.log(`key: ${e.key}`);

console.log(`oldValue: ${e.oldValue}`);

console.log(`newValue: ${e.newValue}`);

console.log(`url: ${e.url}`);

console.log(`is localStorage: ${e.storageArea === localStorage}`);

});

e28d940d73955fe7902b55a2806a7e7a.png

4. IndexedDB 数据库简介

IndexedDB数据库是一种noSQL数据库，但是其所用到的概念大部分跟SQL数据库类似，当然也存在不完全相同的地方。不同之处仅在于IndexedDB数据库不是将对象转换为记录，然后再保存到表里面，而是直接保存的对象，它是通过“ID->数据对象”这种模式来保存的。

IndexedDB数据库操作

跟IndexedDB数据库相关的对象主要包括11个对象：IDBFactory、IDBDatabase、IDBObjectStore、IDBIndex、IDBKeyRange、IDBCursor、IDBCursorWithValue、IDBTransaction、IDBVersionChangeEvent、IDBOpenDBRequest和IDBRequest。这11个对象都是window的function类型的属性对象，使用时都使用其示例，但不需要用户自己使用new来创建，在需要的时候就可以自动获取。11个对象可以分为4类：数据库和ObjecStore相关对象、数据相关对象、查询相关对象和辅助对象。气筒辅助对象包括IDBVersionChangeEvent、IDBOpenDBRequest和IDBRequest。

数据库和ObjectStore相关操作

  1. 创建/打开数据库 IndexedDB数据库的操作是基于事件的，或者说是异步处理的。open方法返回的是一个IDBOpenDBRequest的实力对象，常用属性有onsuccess、onerror、onupgradeneeded，分别表示打开成功、打开失败和数据库版本升级。

语法：

const db_worker = indexedDB.open('dbName', dbVersion);

示例:

const workerDBRequest = indexedDB.open('database', 1);

workerDBRequest.onerror = function(event) {

console.log('打开数据库失败');

}

workerDBRequest.onsuccess = function(event) {

db_worker = workerDBRequest.result; // 也可以使用event.target.result

console.log('打开成功');

}

3b473625fb90b28eeaf7614c1d119bd8.png 0589d57dccbaa4d69e014bcf7a4906bd.png 8015f88f57d0a5d962945606281bb612.png

  1. 创建ObjectStore 通过上图，我们可以看出， indexedDB.open()，返回的是一个IDBOpenDBRequest对象，IDBOpenDBRequest的result是一个IDBDatabase对象，有了这个对象，就可以创建ObjectStore了。这个result包含的属性方法如下： 29842261122dcc91c2b2b5513d0a596f.png createObjectStore、deleteObjectStore分别用于创建和删除ObjectStore。

注意：createObjectStore、deleteObjectStore只能在onupgradeneeded方法中执行。

createObjectStore方法有两个参数，第一个参数是所要创建的ObjectSore的名字，第二个参数是一个对象，用于描述ID，该对象可以有两个属性：keyPath和autoIncrement，前者用来指定一个对象中的属性用作ID，后者若为true则会在保存数据时用Generator生成一个ID，但是这里需要自己创建一个Generator。示例如下：

const workerDBRequest = indexedDB.open('worker', 2);

workerDBRequest.onerror = function(event) {

console.log('打开数据库失败');

}

workerDBRequest.onsuccess = function(event) {

db_worker = workerDBRequest.result; // 也可以使用event.target.result

console.log('打开数据库成功');

}

workerDBRequest.onupgradeneeded = function(e) {

var db = workerDBRequest.result;

db.createObjectStore('category', {});

console.log(`${db.name} 的版本号修改为了${db.version}`);

}

数据操作相关

数据相关操作除了前面介绍的之外，主要还要用到表示事务的IDBTransaction对象。数据库(IDBDatabse的实例对象)的绝大多数操作都需要用事务来完成，数据库实例对象包含一个transaction方法属性(其实是IDBDatabase.prototype的属性)，调用该属性方法就可以创建事务。transaction方法有两个参数，第一个参数用于指定要操作的ObjectStore，可以是一个，也可以是多个，多个采用数组传递；第二个参数指定事务的类型，可以是readonly(默认)或者readwrite，分别表示创建只读或读写事务。

IDBTransaction实例所包含的属性：

["objectStoreNames", "mode", "db", "error", "onabort", "oncomplete", "onerror", "objectStore", "commit", "abort", "durability", "constructor"] 7ffd582b392f21efe82be0481e1aad34.png

IDBObjectStore实例包含的属性：

["name", "keyPath", "indexNames", "transaction", "autoIncrement", "put", "add", "delete", "clear", "get", "getKey", "getAll", "getAllKeys", "count", "openCursor", "openKeyCursor", "index", "createIndex", "deleteIndex", "constructor"] bec89a8c7f09ec05c9e3703fa7d1ba59.png

增加数据

示例：

const workerDBRequest = indexedDB.open('worker', 3);

workerDBRequest.onerror = function(event) {

console.log('打开数据库失败');

}

workerDBRequest.onupgradeneeded = function(e) {

var db = workerDBRequest.result;

db.createObjectStore('category', {keyPath: 'id'});

console.log(`${db.name} 的版本号修改为了${db.version}`);

}

workerDBRequest.onsuccess = function(event) {

db_worker = workerDBRequest.result; // 也可以使用event.target.result

console.log('打开数据库成功');

workerDBOpenSuccess();

}

function workerDBOpenSuccess() {

const tx_category = db_worker.transaction('category', 'readwrite');

const store_category = tx_category.objectStore('category');

const category1 = {'id':007, 'name':'zzh', 'age':18};

const categoryAddRequest = store_category.add(category1);

categoryAddRequest.onsuccess = function(event) {

console.log('保存成功');

}

categoryAddRequest.onerror = function(evevt) {

console.log('保存失败');

}

}

6dcc7f184ec1af5641a68d6ca480460f.png

查询数据

实例：

const workerDBRequest = indexedDB.open('worker', 3);

workerDBRequest.onerror = function(event) {

console.log('打开数据库失败');

}

workerDBRequest.onupgradeneeded = function(e) {

var db = workerDBRequest.result;

db.createObjectStore('category', {keyPath: 'id'});

console.log(`${db.name} 的版本号修改为了${db.version}`);

}

workerDBRequest.onsuccess = function(event) {

db_worker = workerDBRequest.result; // 也可以使用event.target.result

console.log('打开数据库成功');

workerDBOpenSuccess();

}

function workerDBOpenSuccess() {

const tx_category = db_worker.transaction('category', 'readwrite');

const store_category = tx_category.objectStore('category');

const categoryGetRequest = store_category.get(7);

categoryGetRequest.onsuccess = function (event) {

console.log(`查询成功： ${JSON.stringify(categoryGetRequest.result)}`);

}

}

3f34495a7d75d41a3a6c702acf19ec9d.png 查询的方式还有很多种，就像关系型数据库一样，查询可以根据不同的条件筛选数据。

修改数据

const workerDBRequest = indexedDB.open('worker', 3);

workerDBRequest.onerror = function (event) {

console.log('打开数据库失败');

}

workerDBRequest.onupgradeneeded = function (e) {

var db = workerDBRequest.result;

db.createObjectStore('category', {

keyPath: 'id'

});

console.log(`${db.name} 的版本号修改为了${db.version}`);

}

workerDBRequest.onsuccess = function (event) {

db_worker = workerDBRequest.result; // 也可以使用event.target.result

console.log('打开数据库成功');

workerDBOpenSuccess();

}

function workerDBOpenSuccess() {

const tx_category = db_worker.transaction('category', 'readwrite');

const store_category = tx_category.objectStore('category');

const categoryGetRequest = store_category.get(7);

categoryGetRequest.onsuccess = function (event) {

console.log(`查询成功： ${JSON.stringify(categoryGetRequest.result)}`);

let data = event.target.result;

data.age = 19;

const categoryPutRequest = store_category.put(data);

categoryPutRequest.onsuccess = function (event) {

console.log('更新成功');

}

}

}

2e160b38905171139d35277f3e5f3865.png IndexedDB可能不会实时更新显示，有时需要刷新后查看，实际值已经修改。 cbf5dcb6f7aadb9261f1bd48e7ad9441.png

删除数据

示例：

const workerDBRequest = indexedDB.open('worker', 3);

workerDBRequest.onerror = function (event) {

console.log('打开数据库失败');

}

workerDBRequest.onupgradeneeded = function (e) {

var db = workerDBRequest.result;

db.createObjectStore('category', {

keyPath: 'id'

});

console.log(`${db.name} 的版本号修改为了${db.version}`);

}

workerDBRequest.onsuccess = function (event) {

db_worker = workerDBRequest.result; // 也可以使用event.target.result

console.log('打开数据库成功');

workerDBOpenSuccess();

}

function workerDBOpenSuccess() {

const tx_category = db_worker.transaction('category', 'readwrite');

const store_category = tx_category.objectStore('category');

const categoryDeleteRequest = store_category.delete(7); // 根据id删除

categoryDeleteRequest.onsuccess = function(event) {

console.log('删除成功');

}

}

显示需要刷新后查看。 9a7000983065f4924d83c6a32e26e769.png

IndexedDB的操作还有很多，首先大概理解下noSQL的原理，然后再对这些对象，以及对象可进行的操作进行理解使用。感兴趣的也可以参看MDN详解：https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDBAPI/UsingIndexedDB

46a3a56f479a2d49b26abc8162bf77aa.png

扫二维码｜添加微信

7fafc3975c3f1632123c5f8d1e61f547.png

扫码关注

微信号｜iotzzh

公众号｜前端微说

weixin_39894914
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
simple-indexdb-js:使用JavaScript Promise的简单IndexDB的包装器
05-19
SimpleIndexedDB.js 使用ES6的简单IndexedDB的包装器（JavaScript Promise，let，箭头功能）。
JS入门-本地存储
m0_53822923的博客
02-15 1081
简单了解下JS中的本地存储sessionStorage和localStorage
JavaScript IndexedDB 完整指南
p1967914901的博客
09-30 1303
本文将通过一个小教程向你介绍 ，并将 与其他可用选项进行比较。 用于在浏览器中存储数据，对于需要离线工作的 web 应用程序（如大多数进步的 web 应用程序）尤其重要。首先，让我们介绍一下为什么需要将数据存储在 web 浏览器中。数据在 web 应用程序中无处不在——用户交互创建数据、查找数据、更新数据和删除数据。如果没有存储这些数据的方法，就不可能允许用户交互跨多个 web 应用程序的使用保持状态。你通常会使用 MySQL、Postgres、MongoDB、Neo4j、ArangoDB 等数据库来处理
原生js本地存储、获取、删除、清空
weixin_48009560的博客
03-31 3633
利用原生js手撕本地存储实现 存储、获取、删除、清空功能。 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="text"/> <button class="set">存储</button> <
【JavaScript】前端存储（二） —— IndexedDB
努力搬砖
05-15 4152
IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））
Node.js 在本地生成日志文件的方法
12-20
使用 node.js 对日志进行存储，就一定会对本地文件的增删改查，那么我们需要用到fs。 如果你写过 node，想必你应该见过它fs，fs全称为文件系统（File System）。文件系统简单来说就是通过 Node 来操作系统中的文件。
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
12-09
sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。 不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面...
localStore:本地存储
05-20
localStore本地存储方法封装 pc app 适用增加amd node 处理方式基本调用方法store.set(key, value); //设置keystore.get(key); //获取keystore.remove(key); //清除单独keystore.clear(); //清空所有key/value
怎么清空javascript数组
12-09
我们知道javascript变量存储方式分为引用类型和直接量。数组属于对象，即引用类型，引用的是变量指针地址，之所以这样设计也是为了节省内存。 再说到上面的请空数组的方式，如果采用直接赋值一个新数组的方式，那么...
本地存储APIsstore.zip
07-16
本地存储 APIsstore.js 是一个实现了浏览器的本地存储的 JavaScript 封装 API，不是通过 Cookie 和 Flash 技术实现，而是使用 localStorage。小弟我主要是用于chrome，Safari，手机Web等先进浏览器里面跑。so.......
StorageDB对HTML5存储进行封装提供类似MongoDBAPI
08-09
对HTML5存储(localStorage和sessionStorage)进行封装提供类似MongoDB API
indexDB入门到精通，indexdb增删查改，封装indexdb类库，indexdb基本使用
热门推荐
淋雨一直走~
11-29 3万+
indexdb入门操作指南，indexdb入门到精通，indexdb封装类库，indexdb的基本使用，超大容量的存储indexdb简单使用，web端的数据库，web端的大容量存储，优化浏览器加载资源速度。
JS代码清除localStorage缓存
A_Tu_daddy的博客
12-08 6661
根据代码所涉及的页面，在自己所需要的地方加上 localStorage.clear(); 就可以清除 localStorage 缓存。 更加详细的方法可以参考这篇博客，讲解十分详细
javascript - localStorage 本地存储（新增、删除、修改）使用教程
高级前端工程师
02-03 3727
js localStorage用法:新增、修改、删除JavaScript localStorage本地存储的简单使用JavaScript - localStorage的增删改查JavaScript中本地存储(LocalStorage)和会话存储js如何操作localstoragejs如何操作localstorage_javascript技巧什么是JavaScript中的本地存储以及如何使用它javascript - 很全很全的前端本地存储讲解JavaScript使用localStorage存储数据html5
js indexDB使用 --chatGPT
最新发布
Fly_Sky
10-31 212
在 `onupgradeneeded` 事件中，我们定义了一个名为 'myObjectStore' 的对象存储，并设置 `category` 和 `name` 组合为主键。在 `onupgradeneeded` 事件中，我们定义了一个名为 'myObjectStore' 的对象存储，并创建了两个索引，以便后续查询数据。在这个示例中，我们将数据库名称 (`dbName`) 和对象存储名称 (`objStoreName`) 作为函数参数传递，并在函数内部使用它们。抱歉，我之前的回答中存在错误。
原生js实现本地存储的增删案例
qq_53847322的博客
09-13 705
原生js实现本地存储 原生js实现增删
JavaScript的indexedDB
qq_43505774的博客
06-27 466
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> var idb; function db(){ var req=indexedDB.open('indexed','2020627') //设置indexedDB的数据库名字与版本
JS 实现区块链
GoldenaArcher的博客
05-03 1386
/ 可选 timestamp : number;其中 index 并不是必须的，这个属性只是为了方便获取最后一个 block，其他的包含时间戳、当前 block 所包含的交易(transactions)、nonce、hash 和上一个 block 的 hash，除了 nonce 之外的其他属性都比较好理解。nonce 是一个电脑生成的随机数，它的用途是用来生成当前 block 的特定 hash 值，和证明整个 block chain 的合法性。
网页JS自动化脚本(八)使用网页专属数据库indexedDB进行数据收集
weixin_43716462的博客
05-29 1213
【代码】网页JS自动化脚本(八)使用网页专属数据库indexedDB进行数据收集。
js中的本地存储详细讲述
06-02
在JavaScript中，本地存储通常指的是localStorage和sessionStorage。 localStorage：是一种持久化存储技术，它可以将数据存储在浏览器中，即使用户关闭了浏览器，数据也不会丢失。localStorage中存储的数据是以键值...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值