PHP+Go 开发仿简书,实战高并发高可用微服务架构王盘分xiang

踏实的饭盒 -
PHP+Go 开发仿简书,实战高并发高可用微服务架构王盘分xiang
网潘货区:PHP+Go 开发仿简书,实战高并发高可用微服务架构王盘分xiang

<p>JavaScript IndexedDB完全指南
本文将通过一个小型的crmeb教程向您介绍IndexedDB,并将IndexedDB与其他可用选项进行比较。IndexedDB用于在浏览器中存储数据,尤其适用于需要脱机工作的web应用程序(比如大多数高级web应用程序)。

首先,让我们介绍一下为什么我们需要在web浏览器中存储数据。数据在web应用程序中无处不在——用户通过交互来创建数据、查找数据、更新数据和删除数据。如果没有办法存储这些数据,就不可能允许用户交互在多个web应用程序的使用中保持状态。你通常使用MySQL、Postgres、MongoDB、Secondary、ArangoDB等数据库来处理这些存储,但是如果你想让应用离线工作呢?

这在开发web应用程序时尤其重要,web应用程序复制了原生应用程序的感觉,但位于浏览器中。这些渐进式web应用程序必须离线工作,因此它们需要一个存储选项。幸运的是,有几个关于如何在浏览器中存储数据的工具,可以在线和离线访问数据。

1.浏览器存储模式
至于如何在浏览器中存储数据,Web标准提供了三个主要的API:

Cookies:这些数据存储在浏览器中。Cookies的大小限制为4k。通常当服务器响应一个请求时,它们可能包含一个SET-COOKIE头,让浏览器存储一个键和值。然后,客户机应该在将来的请求头中包含这个cookie,这将允许服务器识别浏览器会话等。这些cookie通常具有HTTP-Only属性,这意味着不能通过客户端脚本访问cookie。这使得cookie不是保存离线数据的好选择。
本地存储/会话存储:本地存储/会话存储是浏览器内置的键值存储,其中每个键的大小限制为5MB。LocalStorage存储数据,直到它被删除,而sessionStorage将在浏览器关闭时自动清除。否则,它们的API是相同的。可以使用window . local storage . setitem(" key "," value ")添加键值对。并使用window . local storage . getitem(" key ")检索一个值。注意,LocalStorage API是同步的,所以使用它会阻塞浏览器中的其他活动,这可能是一个问题。
IndexedDB:内置于浏览器中的完整文档数据库,没有存储限制。它允许您异步访问数据,这对于防止复杂操作阻塞演示和其他活动非常有效。这是我们下面要深入讨论的。
在这些方法中,localStorage操作简单,存储数据量小,是一个不错的选择。对于更复杂或常规的操作,IndexedDB可能是更好的选择,尤其是当您需要异步获取数据时。

IndexedDB API比LocalStorage API更复杂。因此,让我们用IndexedDB构建一些东西,让您更好地了解它是如何工作的!

2.用例
创建一个新的HTML文件,我们称之为index.html,内容如下:

索引数据库待办事项列表

正文{
文本对齐:居中;
}

h1 {
颜色:棕色;
}

索引数据库待办事项列表

添加待办事项

//保存输入变量
const textInput = document . query selector("[type = ' text ']")
const button = document . query selector(" button ")
//保存todos的数组
const todos = []
//呈现todos '函数
函数renderTodos(){
const ul = document . query selector(" # todos ul ")
ul.innerHTML = " "
对于(todos的todo){
ul.innerHTML += ${todo}
}
}
renderTodos()

复制代码

现在我们可以开始设置IndexedDB了。在浏览器中打开此文件。如果使用的是VS代码,可以使用liveserver这样的扩展。

IndexedDB支持很好,但是我们还是想检查一下浏览器是否支持API的实现,这样你可以添加以下函数来检查。

//检查indexedDB实现并返回其函数
函数getIndexDB() {
常数索引DB =
window.indexedDB ||
window.mozIndexedDB ||
window.webkitIndexedDB ||
window.msIndexedDB ||
window.shimIndexedDB
if (indexedDB){
返回索引b
}
console.error("此浏览器不支持indexedDB ")
返回null
}
复制代码

此函数返回IndexedDB的浏览器实现或浏览器不支持的日志。可以在浏览器中记录调用getIndexDB的结果,确认浏览器支持IndexedDB。

您可以在下面看到兼容性列表。你可以在这里找到完整的列表,包括移动浏览器。
现在让我们用indexeddb.open ("database name ",1)打开一个数据库。open的第一个参数是数据库的名称,第二个参数是数据库的版本。如果您希望触发onupgraderequired,您应该增加。公开通话。open方法将返回一个具有多个属性的对象,包括onerror、onupgradenneeded和onsuccess。每个属性都接受一个回调函数,该函数在相关事件发生时执行。

const indexedDB = getIndexDB()
// console.log(indexedDB)
const request = indexed db . open(" todo db ",1)
console.log(请求)
render todos();
复制代码

您应该会看到带有IDBOpenDBRequest对象的console.log。IndexedDB是基于事件的,这符合它的异步模型。接下来,让我们看一下数据库启动时可能发生的事件。首先,我们将侦听request.onerror事件,以防止在访问数据库时出现任何错误。

const indexedDB = getIndexDB()
// console.log(indexedDB)
const request = indexed db . open(" todo db ",1)
//console.log(请求)
//on错误处理
request . on Error =(event)= > console . Error(" IndexDB Error:",event)

render todos();
复制代码

我们将监视的下一个事件是request.onupgradeneeded事件,当我们尝试打开版本号高于数据库当前版本号的数据库时,该事件将运行。这是创建存储/表及其模式的功能。该功能在每个版本号下只执行一次。因此,如果您决定更改onupgradedened回调来更新您的模式或创建新的存储,那么版本号也应该在下一个。公开通话。存储本质上相当于传统数据库中的表。

const indexed db = getIndexDB();
// console.log(indexedDB)
const request = indexed db . open(" todo db ",1);
//console.log(请求)
//on错误处理
request . on Error =(event)= > console . Error(" IndexDB Error:",event);
//onupgradereneed
request . onupgradereneed =(){
//获取数据库连接
const db = request.result
//定义新的存储
const store = db . createobjectstore(" todos " ,{
keyPath: "id ",
自动增量:真,
});
//指定一个属性作为索引
store.createIndex("todos_text ",["text"],{unique: false})
};

render todos();
复制代码

在onupgradeneeded中,我们做了以下工作:

获取数据库对象(如果onupgradenneeded函数正在运行,您知道它是可用的)
创建一个名为todos的新存储/表/集合,它的键id是一个自动递增的数字(记录的惟一标识符)
将todos_text指定为索引,这允许我们稍后通过todos_text搜索数据库。如果您不打算按特定属性进行搜索,那么您不必创建索引。
最后,处理request.onsuccess事件,该事件在数据库连接并存储所有设置和配置后运行。您可以利用这个机会提取todo列表,并将它们注入到我们的数组中。

//onsuccess
request.onsuccess = () {
console.log("数据库连接已建立")
//获取数据库连接
常量db = request.result
//创建一个事务对象
const tx = db.transaction("todos "," readwrite ")
//创建一个存储在我们这里的事务
const todos store = tx . objectstore(" todos ")
//获取所有待办事项
const query = todosStore.getAll()
//使用数据查询
query.onsuccess = () {
console.log("所有待办事项: ",query.result)
for(query . result的todo
todos.push(todo.text)
}
renderTodos()
}
}
复制代码

我们成功地做到了以下几点:

获取数据库连接
创建交易记录
指定我们进行交易的存储。
运行getAll查询以获取存储中的所有文档/记录。
在查询特定的onsuccess事件时,我们遍历todos,将它们存储在todos数组中并调用renderTodos(),因此它们被呈现到dom中。
您应该在控制台中看到一个包含空数组的console.log。

错误提示: *如果您运行的是热重装web服务器,如liveserver,您可能会看到错误“无存储”。这是因为onupgradedneeded函数是在您写完函数之前执行的。因此,对于该版本号,不会再次执行。解决方法是增加表的版本号,这将创建一个onupgradereneed,onupgradereneed回调将在下一次页面刷新时执行。

现在我们已经有了数据库设置,我们可以按照相同的模式来处理我们希望发生的任何其他事件。例如,让我们在单击按钮时创建一个事件,该事件不仅会向dom添加一个新的todo,还会向数据库添加一个新的todo,以便在页面刷新时显示。

//按钮事件
button.addEventListener("click ",(event) => {
//设置一个事务
常量db = request.result
const tx = db.transaction("todos "," readwrite ")
const todos store = tx . objectstore(" todos ")
//添加一个todo
const text = textInput.value
Todos.push(text) //将todo添加到数组中
TodosStore.put({text}) //添加到indexedDB
RenderTodos() //更新dom
})
复制代码

现在你可以添加todos了,因为你用的是IndexedDB,无论你在线还是离线都可以。

添加一些todo,当您刷新页面时,您会看到todo仍然存在。它们还显示在查询结果的console.log中,并且每个todo都有一个唯一的ID。到目前为止,完整的代码应该是这样的:

索引数据库待办事项列表

正文{
文本对齐:居中;
}
h1 {
颜色:棕色;
}

索引数据库待办事项列表

添加待办事项

//保存输入变量
const textInput = document . query selector("[type = ' text ']");
const button = document . query selector(" button ");
//保存todos的数组
const todos =[];
//呈现todos '函数
函数renderTodos() {
const ul = document . query selector(" # todos ul ");
ul.innerHTML =
对于(todos的todo){
ul . innerhtml+= $ { todo }
}
}
//检查indexedDB实现并返回其函数
函数getIndexDB() {
常数索引DB =
window.indexedDB ||
window.mozIndexedDB ||
window.webkitIndexedDB ||
window.msIndexedDB ||
window.shimIndexedDB
if (indexedDB) {
返回indexedDB
}
console.log("此浏览器不支持indexed db ");
返回null
}
const indexed db = getIndexDB();
// console.log(indexedDB)
const request = indexed db . open(" todo db ",2);
// console.log(请求)
//on错误处理
request . on Error =(event)= > console . Error(" IndexDB Error:",event);
//onupgradereneed
request . onupgradereneed =(){
//获取数据库连接
const db = request.result
//定义新的存储
const store = db . createobjectstore(" todos " ,{
keyPath: "id ",
自动增量:真,
});
//指定一个属性作为索引
store.createIndex("todos_text ",["text"],{unique: false})
};
// onsuccess
request.onsuccess = () {
console.log("数据库连接已建立")
//获取数据库连接
常量db = request.result
//创建一个事务对象
const tx = db.transaction("todos "," readwrite ")
//创建我们的存储事务之一
const todos store = tx . objectstore(" todos ")
//获取所有待办事项
const query = todosStore.getAll()
//使用数据查询
query.onsuccess = () {
console.log("所有待办事项: ",query.result)
for(query . result的todo
todos.push(todo.text)
}
renderTodos()
}
}
//按钮事件
button.addEventListener("click ",(event) => {
//设置一个事务
常量db = request.result
const tx = db.transaction("todos "," readwrite ")
const todos store = tx . objectstore(" todos ")
//添加一个todo
const text = textInput.value
Todos.push(text) //将todo添加到数组中
TodosStore.put({text}) //添加到indexedDB
RenderTodos() //更新dom
})

render todos();

复制代码

todosStore对象上可用于不同类型事务的其他方法:

清除:删除商店中的所有记录。
添加:插入具有给定id的记录(如果它已经存在,将会出现错误)
Put:插入或更新具有给定id的记录(如果它已经存在,它将被更新)
Get:获取具有特定id的记录。
获取商店的所有记录。
Count:返回存储中的记录数。
CreateIndex:根据要查询的给定索引创建一个对象。
删除:删除给定id的记录

3.性能和其他考虑因素
您需要考虑以下几点:

并非所有浏览器都支持将文件存储为blob。您会找到一个更好的方法:将它们存储为arraybuffer。
某些浏览器可能不支持在私人浏览模式下写入IndexedDB。
IndexedDB在写对象的时候会创建结构化克隆,这会阻塞主线程,所以如果你的大对象被更多的嵌套对象填充,这可能会造成一些延迟。
如果用户关闭浏览器,任何未完成的事务都可能被中止。
如果另一个浏览器选项卡打开一个具有较新数据库版本号的应用程序,它将被阻止升级,直到所有旧版本选项卡被关闭/重新加载。幸运的是,您可以使用onblocked事件来触发警报,通知用户他们需要这样做。
尽管indexedDB非常适合让您的应用程序脱机工作,但它不应该是您的主要数据存储。在互联网连接中,您可能希望将indexedDB与外部数据库同步,以便在用户清除浏览器数据时不会丢失用户的信息。</p>

特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。

php介绍

PHP即“超文本预处理器”,是一种通用开源脚本语言。PHP是在服务器端执行的脚本语言,与C语言类似,是常用的网站编程语言。PHP独特的语法混合了C、Java、Perl以及 PHP 自创的语法。利于学习,使用广泛,主要适用于Web开发领域。

Tags 标签

php

扩展阅读

加个好友,技术交流

1628738909466805.jpg