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-本地存储浅谈的更多相关文章

  1. HTML5本地存储——IndexedDB(一:基本使用)

    在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...

  2. HTML5本地存储——Web SQL Database

    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...

  3. HTML5本地存储——IndexedDB(二:索引)

    在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器——索引. 熟悉数据库的同学都知道索引的一个好处 ...

  4. [转]HTML5本地存储——Web SQL Database

    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...

  5. HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...

  6. HTML5本地存储localStorage与sessionStorage

    在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(applica ...

  7. HTML5 本地存储 LocalStorage

    说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个co ...

  8. (转)HTML5 本地存储

    原文:http://www.cnblogs.com/rainman/archive/2011/06/22/2086069.html HTML5 本地存储 1.sessionStorage 2.loca ...

  9. 利用HTML5开发Android(7)---HTML5本地存储之Database Storage

    在上一篇<HTML5本地存储之Web Storage篇>中,简单介绍了如何利用localStorage实现本地存储:实际上,除了sessionStorage和localStorage外,H ...

  10. 利用HTML5开发Android(4)---HTML5本地存储之Web Storage

    Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...

随机推荐

  1. 「NGK每日快讯」2021.2.3日NGK公链第92期官方快讯!

  2. NGK生态之星空计划启动在即,稀有VAST高兑换比带来高价值!

    NGK生态之星空计划启动在即,为了感谢NGK布道者的支持,NGK官方将全力辅助算力市场,开展全新的星空计划,并发行星空币SPC,空投给算力持有者进行额外奖励. 至此,SPC已经顺利完成2轮空投,也初步 ...

  3. Techme INC解读基因魔剪,带来的是机遇还是风险?

    10月7日,诺贝尔化学奖颁给了法国美国生物学家Jennifer Doudna和生物化学家Emmanuelle Charpentier,以表彰她们对新一代基因技术CRISPR的贡献,全网沸腾. CRIS ...

  4. 基本的DOS命令

    基本的DOS命令 打开CMD的方法 菜单+系统+命令提示符 WIN+R后输入CMD 桌面或文件夹任意位置按住SHIFT后鼠标右键 常见的DOS命令 #盘符切换 直接输入要切换的盘符名称 如输入&quo ...

  5. C++算法代码——众数

    好久没更新了-- 题目来自:http://218.5.5.242:9018/JudgeOnline/problem.php?id=1615 题目描述 N 个 1 到 30000 间无序数正整数,其中 ...

  6. Vue3组件(九)Vue + element-Plus + json = 动态渲染的表单控件

    一个成熟的表单 表单表单,你已经长大了,你要学会: 动态渲染 支持单列.双列.多列 支持调整布局 支持表单验证 支持调整排列(显示)顺序 依据组件值显示需要的组件 支持 item 扩展组件 可以自动创 ...

  7. 用注解开发SpringMVC

    Spring2.5以后,用注解开发SpringMVC的功能十分强大,注解也是SpringMVC的精髓.在实际开发中,都会使用注解来实现. 这让SpringMVC开发工作量最小化,开发者只要专注于业务逻 ...

  8. Vue学习笔记-VSCode安装与配置

    一  使用环境: windows 7 64位操作系统 二  VSCode安装与配置  1.下载: https://code.visualstudio.com 直接点击即可. 2. 点击按装程序,默认安 ...

  9. .Net -- NLog日志框架配置与使用

    NLog是适用于各种.NET平台(包括.NET标准)的灵活,免费的日志记录平台,NLog可将日志写入多个目标,比如Database.File.Console.Mail.下面介绍下NLog的基本使用方法 ...

  10. docker封装vue项目并使用jenkins发布

    一.概述 vue项目可以打一个dist静态资源包,直接使用Nginx发布即可. 现在由于要上docker,需要将vue项目和nginx打成一个镜像才行. 项目结构如下: ./ ├── build │  ...