本地存储是指将数据存储在浏览器中，而不是存储在服务器中。 1.本地存储的分类浏览器的本地存储主要包括Cookie、存储、SQL数据库和IndexedDB四种方式。 CookieCookie最早提出，他们最初的设计目的是保存客户的登录信息，所以他们不适合保存大量数据 Cookie容量小，保存的数据拼接成字符串与程序一起操作。 如果不打开网站，浏览器会将网站的所有Cookie数据发送到服务器，因为它最初的设计目的只是为了保护客户的登录信息(比如SessionId) StorageSotrage是五种用于存储本地数据的HTML5对象。因为它是为存储本地数据而设计的，所以它的操作比Cookie灵活得多。 存储的容量比Cookie大，可以直接根据键值对存储数据，使用键名获取数据。 有两种类型的存储:会话存储和本地存储。前者会在浏览器关闭后清理，后者除非手动或代码清理，否则会一直存储在浏览器中。 SQL数据库SQL数据库在浏览器中封装了一个小型的SQLLite数据库，但是它不适合在前台架构中使用 例如，JS对象的属性可能随时改变，数据类型可能被添加、删除或修改。但是，SQL数据库要求在进行数据操作之前要确定数据结构。 IndexedDBIndexedDB属于一个noSQL数据库，它是非结构化的，它的数据记录可以像JS对象一样随时改变属性(字段)。 与存储相比，它可以保存更多的数据，也可以使用数据库索引、事务等相关概念，但使用起来比存储复杂得多。 2.存储存储存储是窗口对象的一个函数类型属性对象，但这个函数对象比较特殊，既不能作为方法执行，也不能创建实例对象。JS引擎会默认创建两个存储的实例对象，所以直接调用它们就可以了。 JS引擎创建的两个存储实例对象是sessionStorage和localStorage，前者用于临时存储，浏览器关闭后数据会丢失；后者用于长期存储，及时关闭浏览器，数据不会丢失。 Storage.prototype:操纵数据的方法有:getItem(key)setItem(key，The value)removeItem(key)clear()在控制台中使用session storage setItem设置一个值后可以在应用程序的session storage中查看:localStorage和Session Storage使用相同的方法，不同的是存储后的数据清理方法不同。 3.当StorageEventStore实例对象修改数据时，它将触发StorageEvent事件，这有点特殊。当事件被触发时，消息将被发送到其余打开的网站(当然是在同一个浏览器中)。至于能不能发到当前页面，不同的浏览器有不同的解决方案。 (个人测试显示以下浏览器有相同行为，不会发送到当前页面:谷歌Chrome (85.0.4183.83)，(微软Edge 44.18362.449.0)，Firefox(78.0.2 (64位))，双核浏览器(1.0.4.2版))StorageEvent.prototype！DOCTYPE html & gt& lthtml lang = " en " & gt& lthead & gt& ltmeta charset="UTF-8 " >& ltmeta name = " viewport " content = " width =设备宽度，initial-scale=1.0 " >& lttitle & gt文档& lt/title & gt；& lt/head & gt；& ltbody & gt& lt输入值= "测试存储" type = " button " id = ' button '/& gt；& lt脚本& gtconst BTN = document . query select(' # button ')；BTN . onclick =()= & gt；{ localStorage.setItem('testKey '，' test value 1 ')；} window . addevent listener(' storage '，function(e){ console . log(` key:$ { e . key } `)；console . log(` old value:$ { e . old value } `)；console . log(` new value:$ { e . new value } `)；console . log(` URL:$ { e . URL } `)；console . log(` is local storage:$ { e . storage area = = = local storage } `)；});& lt/script & gt；& lt/body & gt；& lt/html & gt；测试结果4。IndexedDB数据库简介Indexed DB数据库是一个noSQL数据库，但是它的大部分概念和SQL数据库类似，当然也有一些区别。 唯一不同的是，IndexedDB数据库不是将对象转换成记录，然后保存到表中，而是直接保存对象，在这种模式下是通过“ID->: Data”保存的。 IndexedDB数据库操作IndexedDB数据库相关对象主要包括11个对象:IDBFactory、IDBDatabase、IDBObjectStore、IDBIndex、IDBKeyRange、IDBCursor、IDBCursorWithValue、IDBTransaction、IDBVersionChangeEvent、IDBOpenDBRequest和IDBRequest。 这11个对象都是window的函数类型属性对象，使用的时候会用到它们的例子。但是，客户不需要使用new自己创建，需要时可以自动获取。 一个对象可以分为四类:数据库和对象存储相关对象、数据相关对象、查询相关对象和辅助对象。 气泵的辅助对象包括IDBVersionChangeEvent、IDBOpenDBRequest和IDBRequest。 与数据库对象相关的操作存储创建/打开数据库索引DB数据库的操作是基于事件的，或者说是异步的。 open方法返回一个IDBOpenDBRequest强度对象，常用的属性有onsuccess、onerror、onupgradened，分别代表打开成功、打开失败、数据库版本更新。 语法:const db _ worker = indexed db . open(' dbname '，db version)；示例: <脚本& gtconst workerDBRequest = indexed db . open(' database '，1)；WorkerdbRequeston error = function(event){ console . log('未能打开数据库')；} workerdbrequest . on success = function(event){ db _ worker = workerdbrequest . result；//也可以使用event.target.result console.log('成功打开')；} & lt/script & gt；返回open对象中包含的属性和方法，以创建ObjectStore。从上图我们可以看到indexedDB.open()返回一个IDBOpenDBRequest对象，IDBOpenDBRequest的结果是一个IDBDatabase对象。使用这个对象，您可以创建一个ObjectStore。 结果包含以下属性方法:createObjectStore和deleteObjectStore分别用于创建和删除ObjectStore。 注意:createObjectStore和deleteObjectStore只能在onupgradeneeded方法中执行。 createStore方法有两个参数。第一个参数是要创建的ObjectSore的名称，第二个参数是一个对象，用于描述ID。这个对象可以有两个属性:keyPath和autoIncrement。前者用于指定一个对象中的属性作为ID，如果后者为真，那么保存数据时将使用生成器生成一个ID，但是需要你自己创建一个生成器。 例子如下: 数据库的大部分操作(IDBDatabse的实例对象)需要通过事务来完成。数据库实例对象包含一个事务方法属性(其实时IDBDatabase.prototype的属性)，可以调用该属性来创建事务。 事务方法有两个参数。第一个参数用来指定要操作的ObjectStore，可以是一个也可以是多个，很多都是通过数组传递的。第二个参数指定事务的类型，可以是readonly(默认)或readwrite，这意味着分别创建只读或读写事务。 IDBTransaction实例中包含的属性:["ObjectStoreNames "，" Mode "，" DB "，" Error "，" OnAbort "，" OnComplete "，" OnError "，" ObjectStore "，" Commit "，" Abort "，" duration "，" constructor"]IDBObjectStore实例包含的属性:["name "，" keypath "，" indexnames "，" Transaction "，" autoincrement "，" put "，" add "，" delete "，" clear "，" get "，" getkey "，" getall "，" getallkeys "，" count "，" opencursor "，" openkey cursor "，" index "，" create index "，" delete index "，" constructor"]添加数据的示例: 修改数据 应用程序显示了一个删除数据的示例: 结果仍有许多操作要测试IndexedDB。首先要了解noSQL的原理，然后要了解这些对象以及它们可以执行的操作。 有兴趣可以参考MDN的详细解释:https://developer.mozilla.org/zh-cn/docs/web/api/indexeddb _ API/using _ indexed db。