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");
相关推荐
任沫2 分钟前
Agent之Function Call
javascript·人工智能·go
默_笙1 小时前
🛬 我让 AI 帮我写了一个打飞机游戏,结果 Canvas 把我整不会了
前端·javascript
梯度不陡1 小时前
AI 到底能不能从零写软件?ProgramBench 和 RepoZero 给出了两种答案
前端·javascript·面试
胡萝卜术3 小时前
滑动窗口最大值:从暴力到单调队列,层层优化全解析
前端·javascript·面试
kyriewen4 小时前
2026 年了,这 6 个 npm 包可以卸载了——浏览器原生 API 已经能替代
前端·javascript·npm
铁皮饭盒5 小时前
bun直接tsx,优雅!
javascript·后端
_柳青杨7 小时前
一文吃透 Node.js 事件循环:从原理到 Node 20+ 重大变更
javascript·后端
JieE21218 小时前
LeetCode 101. 对称二叉树|JS 递归 + 迭代双解法,彻底搞懂镜像判断
javascript·算法
冬奇Lab20 小时前
AI Workflow 定义的四次演进:从 Markdown 到 JS 脚本,再到分布式多 Agent
javascript·人工智能·agent
一颗烂土豆1 天前
Meshopt 压缩深度解析,为什么它比 Draco 更快
前端·javascript·webgl