HTML5笔记3——Web Storage和本地数据库
2017-06-04 23:03
281 查看
上一篇:HTML5笔记2——HTML5音/视频标签详解
保存诸如用户名等简单用户信息,但通过长期使用,人们发现使用Cookies存储永久数据存在几个问题。
大小:Cookies的大小被限制在4KB
带宽:Cookies是随HTTP失误一起被发送的,因此会浪费一部分发送Cookies时使用的带宽
复杂性:要正确的操纵Cookies是很困难的。
针对以上问题,HTML5中,重新提供了一中在客户端本地保存数据的功能,他就是Web Storage。
sessionStorage:将数据保存在session对象中。session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏
览这个网站所花费的时间。session对象可以用来保存在这段时间内所要保存的任何数据。
localStorage:将数据保存在客户端本地的硬件设备(硬盘)中,即使浏览器被关闭了,该数据仍然存在,下一次打开浏览器访问网站时仍然可以
继续使用。localstorage 是通过键值对来存储的。
开发工具我使用HBuilder.exe
新建Test.html页面,代码如下:
View Code
Web Storage概述
在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storage功能,之前可以使用Cookies在客户端保存诸如用户名等简单用户信息,但通过长期使用,人们发现使用Cookies存储永久数据存在几个问题。
大小:Cookies的大小被限制在4KB
带宽:Cookies是随HTTP失误一起被发送的,因此会浪费一部分发送Cookies时使用的带宽
复杂性:要正确的操纵Cookies是很困难的。
针对以上问题,HTML5中,重新提供了一中在客户端本地保存数据的功能,他就是Web Storage。
Web Storage功能。
顾名思义,Web Storage功能就是在Web上存储数据的功能,这里的存储是针对客户端本地而言的。具体分为两种:sessionStorage:将数据保存在session对象中。session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏
览这个网站所花费的时间。session对象可以用来保存在这段时间内所要保存的任何数据。
localStorage:将数据保存在客户端本地的硬件设备(硬盘)中,即使浏览器被关闭了,该数据仍然存在,下一次打开浏览器访问网站时仍然可以
继续使用。localstorage 是通过键值对来存储的。
开发工具我使用HBuilder.exe
新建Test.html页面,代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="application/javascript"> //统一IndexedDB在不同浏览器的实现 window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange; function CreateStorge () { var dbName="indexedDBTest"; var dbVersion=2; var idb; var dbConnect=indexedDB.open(dbName,dbVersion); dbConnect.onsuccess=function (e) { idb=e.target.result; alert("数据库连接成功!") } dbConnect.onerror=function(e){ alert("数据库连接失败!"); } dbConnect.onupgradeneeded=function(e){ idb=e.target.result; var name="user"; var optionParams={keyPath:"userid",autoIncrement:false}; var store=idb.createObjectStore(name,optionParams); alert("对象仓库创建成功!"); } } </script> </head> <body> <input type="button" value="创建对象仓库" onclick="CreateStorge()" /> </body> </html>
View Code
相关文章推荐
- HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)
- HTML5 本地存储1--Web Storage和本地数据库Web SQL Database
- HTML5本地存储-Web Storage
- HTML5项目笔记5:使用HTML5 WebDataBase设计离线数据库
- Html5本地存储和本地数据库
- HTML5 本地数据库技术文档
- 用HTML5本地数据库制作联系人
- html5 本地数据库-Web SQL Database
- 【HTML5初探之本地存储】如果没有数据库。。。
- HTML5--本地存储Web Storage
- html5 本地存储Web Storage
- html5 本地数据库(Web SQL Database)之事务处理函数 transaction和executeSQL 详解
- html5中本地数据库的基本概念
- HTML5--本地存储Web Storage
- 一款功能强大并且可以结合html5实现本地存储的数据库 – SQLite学习文档
- HTML5--本地存储Web Storage
- HTML5 本地数据库(SQLite) 示例 推荐
- 一款功能强大并且可以结合html5实现本地存储的数据库 – SQLite学习文档
- 分享一个简单的HTML5本地数据库demo
- html5 操作本地数据库 完整实例