html本地存储,html5浏览器本地存储有哪些
IndexedDB是一个底层API，用于客户端存储大量结构化数据(包括文件/blob)。API使用索引来实现对这些数据的高性能搜索。
最近有一个业务需求，可以离线存储数据，有网络信号的时候可以上传表格和图片。所以我研究了HTML5的IndexedDB。
对于只存储某些字段的要求，可以使用本地存储和会话存储。但是一旦存储大量数据，本地存储和会话存储就无法满足需求。这时候IndexedDB的威力就体现出来了。
1、创建或者打开数据库
/*兼容不同浏览器的indexed db */const indexed db=window . indexed db window . WebKit indexed db window . mozin indexed db window . msiindexed db；/*创建或连接到数据库*/constraquest=indexed db . open(name，version)；//名称：数据库名称，版本：数据库版本号因为indexedDB在不同浏览器中兼容，所以我们需要一些兼容函数来兼容indexedDB。
2、连接到数据库的回调函数
请求。AddEventListener (success ，function(event){//成功打开或创建数据库}，false)；request . addevent listener( error ，function(event){//未能打开或创建数据库}，false)；Request.addeventlistener(需要升级，函数(event){//更新数据库时执行}，false)；连接到数据库后，请求监听三种状态：
成功：打开或创建数据库成功错误：打开或创建数据库升级失败需要：更新数据库升级需要状态只能在索引数据库创建新数据库和索引数据库时听到。打开(名称，版本)版本(数据库版本号)更改。当版本号不变时，不会触发此状态。创建、删除等。数据库ObjectStore的所有监视都是在此监视事件下执行的。
3、创建、删除ObjectStore
在indexedDB中，ObjectStore类似于数据库的表。
Request.addEventListener(需要升级，function(event){//创建数据库实例const db=event . target . result；//关闭数据库db . Close()；//确定是否存在objectstoredb . objectstorenames . contains(objectstorename)；//删除objectstoredb . deleteobjectstore(objectstorename)；}，假)；您可以按如下方式创建对象存储
Request.addEventListener(需要升级，function(event){//创建数据库实例const db=event . target . result；//确定是否存在ObjectStore if(！Db。objectstorenames . contains(objectstorename)){ const store=db . createobjectstore(objectstorename，{keypath: keypath//keypath作为objectstore的搜索关键字})；//Create index store . Create index for ObjectStore(name，//index index，//key value { unique:unique//is index unique })；}}，假)；4、数据的增删改查
request . addevent listener( success ，function(event){//创建数据库实例const db=event . target . result；//找到一个objectstoredb . transaction(objectstorename，WA)；//当WA为 readwrite 时，可以读写数据。//当WA为‘readonly’时，数据为只读conststore=transaction . objectstore(objectstorename)；}，假)；添加、删除和检查数据库：
//添加数据，当关键字存在时不会添加到store.add(obj)中；//更新数据，关键字存在时覆盖数据，不存在时添加data store . put(obj)；//删除数据，删除指定关键字对应的data store . Delete(value)；//Clear objectstorestore . Clear()；//找到数据，根据关键字找到指定的数据const g=store . get(value)；G. addeventlistener (success ，function(event){//异步搜索后回调函数}，false)；通过索引查找数据
const index=store . index(index name)；const cursor=index . open cursor(range)；cursor . addevent listener( success ，function(event){ const result=event . target . result；if(result){ result . value//data result . continue()；//迭代，光标下移}}，false)；按索引范围查找数据。
const index=store . index(index name)；const cursor=index . open cursor(range)；/* * *当范围为空时，查找所有数据*当范围为指定值时，查找索引满足此条件的对应数据*当范围为IDBKeyRange对象时，查找指定范围内满足条件的数据根据条件*//大于或等于range=idbkey range . lower bound(value，True) //(value，)，value range=idbkey range . lower bound(value，false)//[value，)，=value//小于或等于，isOpenTrue，closed range=IDB key range . upper bound(false，iso pen)//大于或等于value1，小于或等于value2 idbkeyrange.bound (value1，value2，isopen 1，isopen 2)。最后我打包了一个indexedDB库，可以参考：duan602728596/IndexedDB
以上是边肖推出的HTML5本地存储的IndexedDB。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。