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");
相关推荐
码农阿豪21 分钟前
【金仓数据库征文】Mac开发环境|SpringBoot3 + MyBatisPlus对接KES V9 Docker实战全指南
数据库·macos·docker
杨云龙UP32 分钟前
MySQL 数据库常用备份工具对比:mysqldump、mydumper 与 XtraBackup
linux·运维·服务器·数据库·mysql·dba·备份恢复
ZENERGY-众壹37 分钟前
500个工商业电站压垮数据库?海量光伏时序数据存储的架构取舍
数据库·架构·influxdb·光伏·光伏运维
烬羽1 小时前
React Router v7 完全指南:一个 Demo 吃透前端路由
javascript·react.js·前端框架
烬羽1 小时前
从"整个页面刷新"到"丝滑切换":手写一个 HashRouter 彻底搞懂前端路由
javascript·前端框架·全栈
mubei-1232 小时前
SpringDAO的用法
java·开发语言·数据库
用户938515635072 小时前
从零理解 React Router v6:每一个 API 都是怎么工作的
前端·javascript·全栈
星蓝_starblue4 小时前
零服务器、零数据库!开源growth-board,利用GitHub自动管理刷题/学习/求职全流程
服务器·数据库·程序人生·系统架构·node.js·github·改行学it
kyriewen4 小时前
别再这样写条件渲染了——你的React组件里藏着这5种定时炸弹
前端·javascript·react.js
梦想CAD控件5 小时前
网页端CAD的图形选择、编辑与夹点操作教程
前端·javascript·node.js