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

目录

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
Sizecookie大小

一条键值对的大小，即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客户端在处理大量数据方面也变得很便利。

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/584530.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

浅谈【GPU和CPU】

浅谈【GPU和CPU】

GPU和显卡的区别 GPU&#xff08;Graphics Processing Unit&#xff0c;图形处理器&#xff09;通常指的就是显卡。显卡是一种安装在计算机中的扩展卡&#xff0c;主要用于图形和图像处理任务。 GPU作为显卡的核心组件&#xff0c;负责处理图形渲染、图像处理、视频解码和其他…
阅读更多...
每天坐在电脑前10小时的投资者的现货黄金投资秘密

每天坐在电脑前10小时的投资者的现货黄金投资秘密

很多人在现货黄金市场中苦作舟&#xff0c;希望通过交易、实践来找出市场中的奥秘。笔者最近看了一个每天坐在电脑面前十个小时以上做分析和投资的投资者的经验介绍&#xff0c;他道出了一些投资的秘密&#xff0c;笔者认为&#xff0c;这是适合现货黄金投资者借鉴和学习的&…
阅读更多...
派生类的构造与析构函数（C++）

派生类的构造与析构函数（C++）

3.3 派生类的构造与析构函数3.3.1 构造3.3.2 析构 3.3 派生类的构造与析构函数 3.3.1 构造 如果子类构造函数没有显式指明基类部分&#xff08;基类子对象&#xff09;的初始化方式&#xff0c;那么编译器将会自动调用基类的无参构造函数来初始化基类子对象。 如果希望以有参…
阅读更多...
java SSM课程平台系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

java SSM课程平台系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM课程平台系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S…
阅读更多...
【方法】Word文档如何设置密码？

【方法】Word文档如何设置密码？

Word文档可以设置密码保护&#xff0c;如果想要保护文档不被随意打开&#xff0c;可以设置“打开密码”&#xff1b;如果想保护文档不被随意编辑&#xff0c;可以设置“限制密码”&#xff1b;如果当心自己不小心修改了文档&#xff0c;可以设置“只读模式”密码&#xff0c;使…
阅读更多...
一篇文章带你入门PHP魔术方法

一篇文章带你入门PHP魔术方法

PHP魔术方法 PHP 中的"魔术方法"是一组特殊的方法&#xff0c;它们在特定情况下自动被调用。这些方法的名称都是以两个下划线&#xff08;__&#xff09;开头。魔术方法提供了一种方式来执行各种高级编程技巧&#xff0c;使得对象的行为可以更加灵活和强大。以下是一…
阅读更多...
DSG YashanDB数据交互解决方案：更稳、更快、更安全

DSG YashanDB数据交互解决方案：更稳、更快、更安全

近期&#xff0c;深圳计算科学研究院&#xff08;简称“深算院”&#xff09;携手迪思杰&#xff08;北京&#xff09;数据管理技术有限公司&#xff08;简称“DSG”&#xff09;重磅推出基于崖山数据库的数据交互解决方案&#xff0c;具备双向迁移同步、性能稳定、支持复杂对象…
阅读更多...
余弦相似度算法

余弦相似度算法

余弦相似度算法 是什么 余弦距离&#xff0c;也称为余弦相似度&#xff0c;是用向量空间中两个向量夹角的余弦值作为衡量两个个体间差异的大小的度量。 余弦值越接近1&#xff0c;就表明夹角越接近0度&#xff0c;也就是两个向量越相似&#xff0c;这就叫"余弦相似性&q…
阅读更多...
表情串转换

表情串转换

前言 NWAFU 2021阶段二 D 一、题目描述 题目描述 在一个字符串中&#xff0c;设置了由‘/’前导字符和某些特定字母构成的转义子字符串&#xff0c;如“/s”、“/f”、“/c”等用于表示特殊表情符号。现要求编写一个函数&#xff0c;将给定字符串中的转义字符串转换为表情字…
阅读更多...
AD20PCB笔记（写给第三次重学PCB的自己）

AD20PCB笔记（写给第三次重学PCB的自己）

readme&#xff1a;我曾以为自己本科毕业以后&#xff0c;再也不会用到PCB了&#xff0c;因为本科毕设的时候自己设计的PCB开发板出现了严重的设计问题&#xff0c;在实际测试的过程中&#xff0c;电源一上电&#xff0c;板子芯片直接炸飞&#xff0c;当时真的让我很害怕&#…
阅读更多...
JavaScript实现视频共享

JavaScript实现视频共享

1.视频共享webrtc-master index.html <!DOCTYPE html> <html> <head><script typetext/javascript srchttps://cdn.scaledrone.com/scaledrone.min.js></script><meta charset"utf-8"><meta name"viewport" cont…
阅读更多...
c++学习笔记(10)-可变参数模板

c++学习笔记(10)-可变参数模板

1、概念 可变参数模板&#xff08;Variable Template Parameters&#xff09;是 C11 中引入的一种语法&#xff0c;它允许函数或类模板接受可变数量的参数。这样可以方便地定义操作适用于多个类型和/或值的函数或类模板。 使用可变参数模板时&#xff0c;可以在模板参数列表中…
阅读更多...
【MySQL】在数据目录之外创建InnoDB 表（Creating Tables Externally）

【MySQL】在数据目录之外创建InnoDB 表（Creating Tables Externally）

文章目录 【MySQL】在数据目录之外创建InnoDB 表&#xff08;Creating Tables Externally&#xff09;创建表时使用DATA DIRECTORY选项&#xff08;单独表空间&#xff09;innodb_file_per_table设置为开启状态&#xff08;默认&#xff09;innodb_file_per_table设置为关闭状态…
阅读更多...
linux iptables简介

linux iptables简介

表与链 iptables是4表五链 4表&#xff1a;filter表&#xff08;过滤表&#xff09; nat表 raw表 mangle表 五链&#xff1a;INPUT OUTPUT FORWARD PREROUTING POSTROUTING &#xff08;所有链的名字要大写&#xff09; pre…之前 post…之后 filter表 iptables默认操作…
阅读更多...
机器学习距离度量方法

机器学习距离度量方法

1. 机器学习中为什么要度量距离&#xff1f; 机器学习算法中&#xff0c;经常需要 判断两个样本之间是否相似 &#xff0c;比如KNN&#xff0c;K-means&#xff0c;推荐算法中的协同过滤等等&#xff0c;常用的套路是 将相似的判断转换成距离的计算 &#xff0c;距离近的样本相…
阅读更多...
K-means 聚类算法分析

K-means 聚类算法分析

算法简述 K-means 算法原理 我们假定给定数据样本 X &#xff0c;包含了 n 个对象 &#xff0c;其中每一个对象都具有 m 个维度的属性。而 K-means 算法的目标就是将 n 个对象依据对象间的相似性聚集到指定的 k 个类簇中&#xff0c;每个对象属于且仅属于一个其到类簇中心距离…
阅读更多...
Jetson Orin安装riva以及llamaspeak，使用 Riva ASR/TTS 与 Llama 进行实时交谈，大语言模型成功运行笔记

Jetson Orin安装riva以及llamaspeak，使用 Riva ASR/TTS 与 Llama 进行实时交谈，大语言模型成功运行笔记

NVIDIA 的综合语音 AI 工具包 RIVA 可以处理这种情况。此外&#xff0c;RIVA 可以构建应用程序&#xff0c;在本地设备&#xff08;如 NVIDIA Jetson&#xff09;上处理所有这些内容。 RIVA 是一个综合性库&#xff0c;包括&#xff1a; 自动语音识别 &#xff08;ASR&#x…
阅读更多...
Java创建线程执行任务的方法（一）

Java创建线程执行任务的方法（一）

目录 1.继承Thread类 2.实现Runnab类 2.1实现Runnable类 2.2使用Lambda表达式 3.实现Callable类 3.1返回Integer类型数据 3.2返回String类型数据 3.3返回Object类型数据 4.匿名内部类 创建线程的方法&#xff1a;继承Thread类&#xff1b;实现Runnab类&#xff1b;匿名…
阅读更多...
如何文件从电脑传到iPhone，这里提供几个方法

如何文件从电脑传到iPhone，这里提供几个方法

本文介绍了如何使用Finder应用程序、iTunes for Windows、iCloud和谷歌照片将照片从Mac或PC传输到iPhone。 如何将照片从Mac传输到iPhone 如果你有一台Mac电脑&#xff0c;里面装满了你想转移到iPhone的照片&#xff0c;这是一件非常简单的事情。只需遵循以下步骤&#xff1a…
阅读更多...
Python中matplotlib库的使用1

Python中matplotlib库的使用1

1 matplotlib库简介 matplotlib是一个数学绘图库&#xff0c;可以将数据通过图形的方式显示出来&#xff0c;也就是数据可视化。 2 matplotlib库的安装 2.1 打开cmd窗口 点击键盘的“Win”“R”键&#xff0c;在弹出的“运行”对话框的“打开”栏中输入“cmd”&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023