HTML5-本地存储浅谈
Web Storage是HTML5里面引入的一个类似于cookie的本地存储功能,可以用于客户端的本地存储
sessionStorage && localStorage
- sessionStorage - 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据,会话级别的存储。
- localStorage - 用于持久化的本地存储,除非主动删除数据,否则数据会一直存在
不同于cookie的4kb数据存储量
localStorage和sessionStorage均可以保存5MB的信息
localStorage和sessionStorage:仅在客户端(即浏览器)中保存,不参与和服务器的通信
localStorage和sessionStorage:原生接口可以使用
localStorage和sessionStorage:在前端页面即可查看,安全性能较差
sessionStorage && localStorage
setItem - 存储数据
getItem - 获取指定键名数据
removeItem - 删除指定键名数据
clear - 删除全部数据
valueOf - 获取全部数据
- 判断是否支持
if (window.localStorage or window.sessionStorage) {
// 浏览器支持
localStorage or sessionStorage }
else{
// 不支持
}
- 应用场景
localStorage可以用来夸页面传递参数
sessionStorage用来保存一些临时的数据,防止用户刷新页面之后丢失了一些参数
- 作用域
localStorage: 在同一个浏览器内,可以进行数据操作
sessionStorage: 在同一浏览器、同一窗口的同源文档才能共享数据,进行数据操作
- 兼容性
IndexedDB
- IndexedDB - 是一种低级API,用于客户端存储大量结构化数据(包括, 文件/ blobs)。该API使用索引来实现对该数据的高性能搜索。在 HTML5 的本地存储中,该数据库是一种存储在客户端本地的 NoSQL 数据库,它可以存储大量的数据。
- 特点
支持事务、游标、索引等数据库操作,存储空间大
永久存储,删除缓存不干扰IndexedDB,异步性
一个页面可以连接多个IndexedDB数据库,每个数据库的名称必须是唯一的
var indexedRequest = indexedDB.open('dbName', 1);
- open 连接数据库,接收两个参数。第一个参数数据库名,第二个版本号(必须为整数)
- onerror && onsuccess 数据库成功失败后的回调
- onsuccess(e)
db = e.target.result - db.close 关闭数据库
- add 增加数据。接收一个参数,为需要保存到对象仓库中的对象。
- put 增加或修改数据。接收一个参数,为需要保存到对象仓库中的对象
- get 获取数据。接收一个参数,为需要获取数据的主键值
- delete 删除数据。接收一个参数,为需要获取数据的主键值
- onupgradeneeded 数据库更新回调
- deleteDatabase 删除数据库。接收一个参数,数据库名
- 兼容性
IE10+
Firefox 10+、Chrome 23+、Opera 15+
iPhone ios8-ios10 safari支持(X5内核不支持)
Android X5内核支持
WebSQL
- WebSQL - Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 API
核心方法
openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象
transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚
executeSql:这个方法用于执行实际的 SQL 查询
- openDatabase打开数据库
我们可以使用 openDatabase() 方法来打开已存在的数据库,如果数据库不存在,则会创建一个新的数据库,使用代码如下:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
openDatabase( 数据库名称,版本号,描述文本,数据库大小,创建回调)
- transaction 数据库操作 && executeSql 操作数据库
打开数据库
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql(操作语句);
});
- 兼容性
鉴于HTML5已经废弃的webSql,不建议继续深入了解
总结
在之前我们提到本地存储的时候往往都只会想到cookie,并不知道HTML还存在几种不同的本地存储,就包括sessionStorage、localStorage和IndexedDB,但是随着我们的需求不断增长,cookie并不能很好的满足我们的需求,这个时候就出现sessionStorage、localStorage和IndexedDB,三种分别有着cookie所不具备的功能属性,能帮助我们更好的完成web开发。
HTML5-本地存储浅谈的更多相关文章
- HTML5本地存储——IndexedDB(一:基本使用)
在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
- HTML5本地存储——Web SQL Database
在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...
- HTML5本地存储——IndexedDB(二:索引)
在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器——索引. 熟悉数据库的同学都知道索引的一个好处 ...
- [转]HTML5本地存储——Web SQL Database
在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...
- HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...
- HTML5本地存储localStorage与sessionStorage
在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(applica ...
- HTML5 本地存储 LocalStorage
说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个co ...
- (转)HTML5 本地存储
原文:http://www.cnblogs.com/rainman/archive/2011/06/22/2086069.html HTML5 本地存储 1.sessionStorage 2.loca ...
- 利用HTML5开发Android(7)---HTML5本地存储之Database Storage
在上一篇<HTML5本地存储之Web Storage篇>中,简单介绍了如何利用localStorage实现本地存储:实际上,除了sessionStorage和localStorage外,H ...
- 利用HTML5开发Android(4)---HTML5本地存储之Web Storage
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...
随机推荐
- 「NGK每日快讯」2021.2.3日NGK公链第92期官方快讯!
- NGK生态之星空计划启动在即,稀有VAST高兑换比带来高价值!
NGK生态之星空计划启动在即,为了感谢NGK布道者的支持,NGK官方将全力辅助算力市场,开展全新的星空计划,并发行星空币SPC,空投给算力持有者进行额外奖励. 至此,SPC已经顺利完成2轮空投,也初步 ...
- Techme INC解读基因魔剪,带来的是机遇还是风险?
10月7日,诺贝尔化学奖颁给了法国美国生物学家Jennifer Doudna和生物化学家Emmanuelle Charpentier,以表彰她们对新一代基因技术CRISPR的贡献,全网沸腾. CRIS ...
- 基本的DOS命令
基本的DOS命令 打开CMD的方法 菜单+系统+命令提示符 WIN+R后输入CMD 桌面或文件夹任意位置按住SHIFT后鼠标右键 常见的DOS命令 #盘符切换 直接输入要切换的盘符名称 如输入&quo ...
- C++算法代码——众数
好久没更新了-- 题目来自:http://218.5.5.242:9018/JudgeOnline/problem.php?id=1615 题目描述 N 个 1 到 30000 间无序数正整数,其中 ...
- Vue3组件(九)Vue + element-Plus + json = 动态渲染的表单控件
一个成熟的表单 表单表单,你已经长大了,你要学会: 动态渲染 支持单列.双列.多列 支持调整布局 支持表单验证 支持调整排列(显示)顺序 依据组件值显示需要的组件 支持 item 扩展组件 可以自动创 ...
- 用注解开发SpringMVC
Spring2.5以后,用注解开发SpringMVC的功能十分强大,注解也是SpringMVC的精髓.在实际开发中,都会使用注解来实现. 这让SpringMVC开发工作量最小化,开发者只要专注于业务逻 ...
- Vue学习笔记-VSCode安装与配置
一 使用环境: windows 7 64位操作系统 二 VSCode安装与配置 1.下载: https://code.visualstudio.com 直接点击即可. 2. 点击按装程序,默认安 ...
- .Net -- NLog日志框架配置与使用
NLog是适用于各种.NET平台(包括.NET标准)的灵活,免费的日志记录平台,NLog可将日志写入多个目标,比如Database.File.Console.Mail.下面介绍下NLog的基本使用方法 ...
- docker封装vue项目并使用jenkins发布
一.概述 vue项目可以打一个dist静态资源包,直接使用Nginx发布即可. 现在由于要上docker,需要将vue项目和nginx打成一个镜像才行. 项目结构如下: ./ ├── build │ ...