【浏览器】Web存储梳理和总结

  • 开发
  • 34

目录

1. 前言

2. cookie

3. sessionStorage和localStorage

4. indexedDB

4.1 IDBFactory原型对象的方法（indexedDB是IDBFactory的实例化对象）

4.2 操作请求IDBOpenDBRequest和IDBRequest（IDBRequest继承于EventTarget）

4.3 数据库IDBDataBase原型的的方法和属性

4.4 仓库IDBObjectStore原型的方法和属性如下：

 4.5 索引IDBIndex原型的方法和属性

4.6 事务IDBTransaction原型的方法和属性

4.7 指针IDBCursor原型的方法和属性

4.8 主键集合IDBKeyRange原型的方法和属性

5. 总结

1. 前言

        Web存储主要包含cookie、sessionStorage、localStorage和indexedDB（WebSQL已被废弃），本篇就这4种存储的知识点进行梳理和总结。

2. cookie

        cookie从开始是为了弥补HTTP协议无状态的不足而设计的。

        用户第一次访问或登录时，服务端产生一个会话ID（就是一个身份ID），通过HTTP响应头Set-Cookie将会话ID带回给客户端，从响应头Set-Cookie取出会话ID，保存在浏览器中。后续HTTP请求通过请求头Cookie将会话ID带回给服务端，服务端就清楚知道来自哪个用户。

        可以通过document.cookie取得cookie数据，可发现cookie数据的格式是字符串形式的，由许多个键值对组成，每对键值对由一个分号+一个空格分隔。注意： cookie数据是通过encodeURIComponent编码过的，需要decodeURIComponent解码得到原始cookie数据。

// 读取cookie
document.cookie;
'key1=value1; key2=value2; key3=value3......'

// 写入cookie
document.cookie = 'key4=value4;max-age=5;path=/';

// 删除cookie一条键值
document.cookie = 'key4=;max-age=0';

      除了键值对数据，每个键值对还有：Domain、Path、Expires、Size、HttpOnly、Secure、SameSite、Partition Key、Priority，大家可以打开浏览器F12，点进应用（Application）中进行查看。

Cookie基本信息
字段名 中文释义 说明
Name 键名 <略>
Value 键值 <略>
Domain 域名

网站所在的域名（不含端口）
Path 路径 cookie的存储路径，默认是当前项目根路径
Expires/Max-Age 失效时间 cookie过期时间，什么时候过期，可以是时间节点Expires，也可以是多少秒Max-Age
Size cookie大小

一条键值对的大小，即Name的size + Value的size
HttpOnly 是否仅通过HTTP传输 某些重要cookie仅由后台设置，不可随意修改，可设置此标志
Secure 安全标志 设置Secure标志后，这条键值对仅https请求才能携带
SameSite 同站点 防止CSRF攻击和用户追踪的安全属性
Partition Key <略>
Priority 优先级
Cookie优缺点
缺点

1. 存在安全问题，因为cookie中存储的身份认证信息容易被窃取

2. 存储数据大小问题，仅4KB

3. 每次HTTP都将cookie的所有参数，导致HTTP报文变大，请求变慢
3. sessionStorage和localStorage

        HTML5新增了会话存储sessionStorage和本地存储localStorage，二者都是Storage的实例化对象，均遵循同源策略，本篇先介绍一下Storage原型对象上的方法和属性，再总结一下二者的区别。

Storage原型对象的方法和属性
方法和属性 说明 示例

Storage.prototype

.setItem(key, value)

功能：设置键值对，key和value都会被隐式转换成string

输入：string, string

输出：无

sessionStorage.seItem('a', 1);

localStorage.seItem('A', 1);

Storage.prototype

.getItem(key)

功能：通过键名key获取键值value

输入：string

输出：string

sessionStorage.getItem('a');

localStorage.getItem('A');

Storage.prototype

.key(index)

功能：传入索引，获取对应位置的键名key

输入：number | string

输出：string

sessionStorage.key(0);

localStorage.key(0);

Storage.prototype

.removeItem(key)

功能：根据键名key，删除键值对

输入：string

输出：无

sessionStorage.removeItem('a');

localStorage.removeItem('A');
Storage.prototype.clear()

功能：清空所有键值对

输入：无

输出：无

sessionStorage.clear();

localStorage.clear();
Storage.prorotyp.length

功能：获取键值对数量

输出：number

sessionStorage.length;

localStorage.length;
sessionStorage和localStorage的异同
相同

1. 均是Storage实例化对象，继承Storage.prototype的属性和方法

2. 遵循同源策略，同源下数据共享

3. 都有5M存储空间，且仅保存字符串类型数据
不同

1. 失效时间

① localStorage不会失效，关闭浏览器也不会失效，需要用户手动清除localStorage.clear()

② sesionStorage与页面会话绑定，页面会话失效，sessionStorage即失效，刷新页面不会失效

2. 作用范围

① localStorage在同源情况下，跨页签也有效，可跨页签共享数据

② sessionStorage仅当前页签有效
4. indexedDB

        HTML5还新增事务型的数据库indxedDB，可存储大量数据。indexedDB操作涉及的API比较多，但也不是太难，有兴趣同学可以网上查资料学习。本篇仅给出涉及的所有方法和属性。

4.1 IDBFactory原型对象的方法（indexedDB是IDBFactory的实例化对象）
IDBFfactory
IDBFactory原型的方法和属性 描述 示例
IDBFactory.prototype.open()

功能：打开或新建数据库

 <略>
IDBFactory.prototype.databases() <略> <略>
IDBFactory.prototype.deleteDatabase() <略> <略>
IDBFactory.prototype.cmp() <略> <略>
4.2 操作请求IDBOpenDBRequest和IDBRequest（IDBRequest继承于EventTarget）
操作请求IDBOpenDBRequest和IDBRequest
原型的方法和属性 描述 示例
IDBRequest.prototype.result <略> <略>
IDBRequest.prototype.onsuccess <略> <略>
IDBRequest.prototype.onerror <略> <略>
IDBRequest.prototype.transaction <略> <略>
IDBRequest.prototype.source <略> <略>
IDBRequest.prototype.error <略> <略>
IDBRequest.prototype.readyState <略> <略>

IDBOpenDBRequest.prototype.onupgradeneeded

 <略> <略>

IDBOpenDBRequest.prototype.onblocked

 <略> <略>
4.3 数据库IDBDataBase原型的的方法和属性
数据库IDBDatabase
方法和属性 描述 示例

IDBDataBase.prototype.createObjectStore()

 <略> <略>

IDBDataBase.prototype.deleteObjectStore()

 <略> <略>

IDBDataBase.prototype.transaction()

功能：新建事务

 <略>

IDBDataBase.prototype.close()

 <略> <略>

IDBDataBase.prototype.name

 <略> <略>

IDBDataBase.prototype.objectStoreNames

 <略> <略>

IDBDataBase.prototype.version

 <略> <略>

IDBDataBase.prototype.onclose

 <略> <略>

IDBDataBase.prototype.onabort

 <略> <略>

IDBDataBase.prototype.onerror

 <略> <略>

IDBDataBase.prototype.onversionchange

 <略> <略>
4.4 仓库IDBObjectStore原型的方法和属性如下：
仓库对象IDBObjectStore
方法和属性 描述 示例

IDBObjectStore.prototype.add()

 功能：写入一条数据 <略>

IDBObjectStore.prototype.delete(primaryKey)

 功能：根据主键删除一条数据 <略>

IDBObjectStore.prototype.clear()

 <略> <略>

IDBObjectStore.prototype.put()

 功能：更新一条数据 <略>

IDBObjectStore.prototype.get(primaryKey)

 功能：根据主键查询一条数据 <略>

IDBObjectStore.prototype.getAll()

 <略> <略>

IDBObjectStore.prototype.getKey()

 <略> <略>

IDBObjectStore.prototype.getAllKeys()

 <略> <略>

IDBObjectStore.prototype

.createIndex(index, property, options)

功能：新建索引

 <略>

IDBObjectStore.prototype.deleteIndex()

 <略> <略>

IDBObjectStore.prototype.index()

 <略> <略>

IDBObjectStore.prototype.openCursor()

功能：打开一个游标cursor

 <略>

IDBObjectStore.prototype.openKeyCursor()

 <略> <略>

IDBObjectStore.prototype.count()

 <略> <略>

IDBObjectStore.prototype.name

 <略> <略>
IDBObjectStore.prototype.keyPath <略> <略>
IDBObjectStore.prototype.autoIncrement <略> <略>

IDBObjectStore.prototype.indexNames

 <略> <略>

IDBObjectStore.prototype.transaction

 <略> <略>
 4.5 索引IDBIndex原型的方法和属性
索引IDBIndex
方法和属性 描述 示例
IDBIndex.prototype.get(index) 功能：通过索引获取一条数据 <略>
IDBIndex.prototype.getAll() <略> <略>
IDBIndex.prototype.getKey() <略> <略>
IDBIndex.prototype.getAllKeys() <略> <略>
IDBIndex.prototype.openCursor() <略> <略>
IDBIndex.prototype.openKeyCursor() <略> <略>
IDBIndex.prototype.count() <略> <略>
IDBIndex.prototype.objectStore <略> <略>
IDBIndex.prototype.name <略> <略>
IDBIndex.prototype.keyPath <略> <略>
IDBIndex.prototype.unique <略> <略>
IDBIndex.prototype.multiEntry <略> <略>
4.6 事务IDBTransaction原型的方法和属性
事务IDBTransaction
方法和属性 描述 示例
IDBTransaction.prototype.commit() <略> <略>
IDBTransaction.prototype.abort() <略> <略>
IDBTransaction.prototype.objectStore() 功能：获取IDBObjectStore对象 <略>
IDBTransaction.prototype.db <略> <略>
IDBTransaction.prototype.objectStoreNames <略> <略>
IDBTransaction.prototype.mode <略> <略>
IDBTransaction.prototype.durability <略> <略>
IDBTransaction.prototype.oncomplete <略> <略>
IDBTransaction.prototype.onerror <略> <略>
IDBTransaction.prototype.onabort <略> <略>
IDBTransaction.prototype.error <略> <略>
4.7 指针IDBCursor原型的方法和属性
指针IDBCursor
方法和属性 描述 示例
IDBCursor.prototype.advance() <略> <略>
IDBCursor.prototype.delete() <略> <略>
IDBCursor.prototype.update() <略> <略>
IDBCursor.prototype.direction <略> <略>
IDBCursor.prototype.continue() <略> <略>
IDBCursor.prototype.continuePrimaryKey() <略> <略>
IDBCursor.prototype.key <略> <略>
IDBCursor.prototype.primaryKey <略> <略>
IDBCursor.prototype.request <略> <略>
IDBCursor.prototype.source <略> <略>
4.8 主键集合IDBKeyRange原型的方法和属性
主键集合IDBKeyRange
方法和属性 描述 示例
IDBKeyRange.prototype.includes() <略> <略>

IDBKeyRange.prototype.upper

 <略> <略>
IDBKeyRange.prototype.lower <略> <略>
IDBKeyRange.prototype.upperOpen <略> <略>
IDBKeyRange.prototype.lowerOpen <略> <略> 
const request = indexedDB.open('test', 1);

request.onerror = (err) => {
    console.log(err);
}

request.onsuccess = (event) => {
    const db = request.result;
}

request.onupgradeneeded = (event) => {
    const db = event.target.result;
    let objectStore;
    if(!db.objectStoreNames.contains('person')) {
        objectStore = db.createObjectStore('person', { keyPath: 'id' });
    }
}

        本篇仅列出indexedDB操作涉及所有方法和属性，因时间原因未作详细说明，后续有时间都会补上。这些方法和属性怎么使用，可以参见阮一峰的这一篇文章：浏览器数据库 IndexedDB 入门教程 - 阮一峰的网络日志

5. 总结

       随差浏览器的发展，Web可以做的事情也会越来越多，Web3D、GIS以及其他PC端应用都有可能搬到Web上，它们均会涉及大量数量的处理和存储，Web存储为Web客户端在处理大量数据方面也变得很便利。

注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~

阅读全部

相关推荐

  1. 【浏览器】Web存储梳理和总结

    2023-12-29 07:08:06       35 阅读

  2. 【CSS】布局方式梳理和总结

    2023-12-29 07:08:06       35 阅读

  4. 【协议】XMLHttpRequest的梳理和总结

    2023-12-29 07:08:06       29 阅读

  5. 【ECMAScript】DOM节点类型知识点的梳理和总结

    2023-12-29 07:08:06       31 阅读

  6. 【网络协议】WebSocket知识点梳理和总结

    2023-12-29 07:08:06       27 阅读

  7. TypeScript的基础类型和高级类型梳理总结

    2023-12-29 07:08:06       21 阅读

  10. 【React】常用Hook函数的梳理和总结（第二篇）

    2023-12-29 07:08:06       38 阅读

最近更新

  4. TCP协议是安全的吗?

    2023-12-29 07:08:06       16 阅读

  12. 阿里云服务器执行yum，一直下载docker-ce-stable失败

    2023-12-29 07:08:06       16 阅读

  13. 【Python教程】压缩PDF文件大小

    2023-12-29 07:08:06       15 阅读

  18. 通过文章id递归查询所有评论（xml）

    2023-12-29 07:08:06       18 阅读

热门阅读

  2. 《C#程序设计教程》总复习

    2023-12-29 07:08:06       30 阅读

  4. Vue2面试题：说一下v-show、v-if、v-for的理解？

    2023-12-29 07:08:06       33 阅读

  8. Latex如何转成Word

    2023-12-29 07:08:06       34 阅读

  9. stm32采用队列方式接收和发送RS485串口数据

    2023-12-29 07:08:06       32 阅读

  12. 第41节: Vue3 watch函数

    2023-12-29 07:08:06       42 阅读

  17. uniapp 目录结构

    2023-12-29 07:08:06       35 阅读

  21. K8S Ingress-Nginx导出TCP端口

    2023-12-29 07:08:06       39 阅读

  24. k8s之服务发现

    2023-12-29 07:08:06       39 阅读