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 ...
随机推荐
- let & var & initialized bug
let & var & initialized bug what's wrong with this? https://github.com/lydiahallie/javascrip ...
- post upload file & application/x-www-form-urlencoded & multipart/form-data
post upload file application/x-www-form-urlencoded & multipart/form-data https://stackoverflow.c ...
- vue的filter用法,检索内容
var app5 = new Vue({ el: '#app5', data: { shoppingList: [ "Milk", "Donuts", &quo ...
- 「NGK每日快讯」12.14日NGK公链第41期官方快讯!
- django学习-12.访问不同url/接口地址实现对指定数据的增删改查功能
1.前言 通过前面博客[django学习-10.django连接mysql数据库和创建数据表]里的操作,我们已经成功在数据库[hongjingsheng_project]里创建了一张数据表[hello ...
- c/c++ 之静态库
静态库 编译成目标文件(未链接) g++ -c a.cc b.cc c.cc d.cc #生成 a.o b.o c.o d.o 将目标文件打包为静态库 ar rs libxxx.a a.o b.o c ...
- display: inline、block、inline-block、flex和inline-flex
inline 共享一行 不能修改width.height属性,大小由内容撑开 padding属性 top.right.bottom.left设置都有效:margin属性只有left.right设置有效 ...
- 调用Config.ini类
private static string sPath = @Directory.GetCurrentDirectory() + "\\config.ini"; [DllImpor ...
- Spirng 循环依赖报错:Requested bean is currently in creation: Is there an unresolvable circular reference?
1:前言 最近在项目中遇到了一次循环依赖报错的问题,虽然解决的很快,但是有些不明白的地方,特此记录. 在此我把 bean 的结构和 注入方式单独拎出来进行演示 1.1:报错提示 1.2:错误日志 Ex ...
- 【翻译】Python PEP8编码规范(中文版)
原文链接:http://legacy.python.org/dev/peps/pep-0008/ item detail PEP 8 Title Style Guide for Python Code ...