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. let & var & initialized bug

    let & var & initialized bug what's wrong with this? https://github.com/lydiahallie/javascrip ...

  2. 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 ...

  3. vue的filter用法,检索内容

    var app5 = new Vue({ el: '#app5', data: { shoppingList: [ "Milk", "Donuts", &quo ...

  4. 「NGK每日快讯」12.14日NGK公链第41期官方快讯!

  5. django学习-12.访问不同url/接口地址实现对指定数据的增删改查功能

    1.前言 通过前面博客[django学习-10.django连接mysql数据库和创建数据表]里的操作,我们已经成功在数据库[hongjingsheng_project]里创建了一张数据表[hello ...

  6. 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 ...

  7. display: inline、block、inline-block、flex和inline-flex

    inline 共享一行 不能修改width.height属性,大小由内容撑开 padding属性 top.right.bottom.left设置都有效:margin属性只有left.right设置有效 ...

  8. 调用Config.ini类

    private static string sPath = @Directory.GetCurrentDirectory() + "\\config.ini"; [DllImpor ...

  9. Spirng 循环依赖报错:Requested bean is currently in creation: Is there an unresolvable circular reference?

    1:前言 最近在项目中遇到了一次循环依赖报错的问题,虽然解决的很快,但是有些不明白的地方,特此记录. 在此我把 bean 的结构和 注入方式单独拎出来进行演示 1.1:报错提示 1.2:错误日志 Ex ...

  10. 【翻译】Python PEP8编码规范(中文版)

    原文链接:http://legacy.python.org/dev/peps/pep-0008/ item detail PEP 8 Title Style Guide for Python Code ...