js之客户端存储

概述

客户端存储
cookie
Storage
sessionStorage
localStorage
IndexedDB
打开
事务
游标
索引

主要包含

  • 名称
  • 路径
  • 过期时间
  • 安全标志

Storage

存储的主要方法有

  • clear()
  • setItem(name, value)
  • getItem(name)
  • removeItem(name)
  • key(index)

两个实例有

  • sessionStorage
  • localStorage

事件有

  • storage, 事件对象的属性有
    • domain
    • key
    • newValue
    • oldValue

IndexedDB

IndexedDB
IDBRequest
IDBDatabase
IDBCursor
IDBKeyRange
IDBIndex

打开:indexedDB.open(dbname, version),返回对象为IDBRequest,其支持事件onerroronsuccess,事件 对象属性有

  • event.target:为请求
  • event.target.result:为IDBDatabase
  • event.target.errorCode:错误码

如果数据库不存在,会触发事件upgradeneeded
IDBDatabase:其支持的属性和方法有

  • objectStoreNames
  • deleteObjectStore(table)
  • createObjectStore(table)

事务访问形式有,其支持的事件有onerror,oncomplete

  • db.transaction():对数据库的所有对象存储有只读权限
  • db.transaction(数组/字符串):对数据库的指定对象存储有只读权限

事务访问权限有

  • "readonly"
  • "readwrite"
  • "versionchange"

获取对象存储

javascript 复制代码
const store = transaction.objectStore(table);

对象存储支持的方法有,其返回的请求对象支持的事件有onerror,onsuccess

  • get(key)
  • add():有重复时会报错
  • put()
  • delete()

游标操作使用,其支持的事件有onerror,onsuccess,事件对象event.target.resultIDBCursor

javascript 复制代码
const request = store.openCursor();

IDBCursor的属性有

  • direction:值有NEXT("next"),NEXTUNIQUE("nextunique"),PREV("prev"),PREVUNIQUE("prevunique")
  • key
  • value
  • primaryKey

方法有

  • update()
  • delete()
  • continue()
  • advance(count)

游标打开时可以指定键范围使用IDBKeyRange,其支持的方法有

  • only():一个参数
  • lowerBound():第二个参数表示是否包含自身,false表示包含, true表示不包含
  • upperBound():第二个参数表示是否包含自身,false表示包含, true表示不包含
  • bound():下限的键,上限的键,是否跳过下限,是否跳过上限

索引创建

javascript 复制代码
const index = store.createIndex("username", "username", {unqiue : true});

获取索引

javascript 复制代码
const index = store.index("username");

索引游标操作,其事件result.key为索引键

javascript 复制代码
const reqeust = index.openCursor();
const reqeust = index.openKeyCursor();//result.key为索引键,result.value为主键

索引查询

javascript 复制代码
const request = index.get("008");//获取单条记录
const request = index.getKey("008");//result.value为主键

IDBIndex的属性有

  • name
  • keyPath
  • objectStore
  • unique

objectStore对象存储中有属性indexNames

删除索引使用

javascript 复制代码
store.deleteIndex("username");
相关推荐
Listen·Rain34 分钟前
Vue3:setup详解
前端·javascript·vue.js
白露与泡影34 分钟前
Redis 缓存实战:雪崩、穿透、击穿一次讲透
数据库·redis·缓存
kyriewen2 小时前
面试官让我优化一个卡死的表格,我打开 Claude 五秒重写,他放下咖啡问我要不要来当组长
前端·javascript·面试
赵渝强老师2 小时前
【赵渝强老师】使用Oracle可传输的表空间迁移数据
数据库·oracle
小粉粉hhh2 小时前
React(二)——dom、组件间通信、useEffect
前端·javascript·react.js
IpdataCloud3 小时前
跨区服玩家延迟高怎么办?用IP离线库自动分配到最近服务器
数据库·tcp/ip·github·php·ip
wuqingshun3141594 小时前
MYSQL默认的事务隔离级别是什么?为什么选择这个级别?
数据库·mysql
空中湖4 小时前
电池简史(五):极限之梦与终章——锂硫、锂空气、量子电池,以及你该知道的电池投资与生活指南
数据库·程序人生
索西引擎4 小时前
【React】key 属性:协调算法中的元素标识机制与最佳实践
前端·javascript·react.js
小雪_Snow5 小时前
JavaScript 中的三种常用事件
开发语言·前端·javascript