Html5的Web存储和WebSql
HTML5 Web 存储
使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
本地存储的背景
众所周知Html4时代Cookie的大小、格式、存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie。但是Cookie的这些限制,也就导致了Cookie只能存储一些ID之类的标识符等简单的数据,复杂的数据就更别扯了。
下面是Cookie的限制:
- 1, 大多数浏览器支持最大为 4096 字节的 Cookie。
- 2, 浏览器还限制站点可以在用户计算机上存储的 Cookie 的数量。大多数浏览器只允许每个站点存储 20 个 Cookie;如果试图存储更多 Cookie,则最旧的 Cookie 便会被丢弃。
- 3, 有些浏览器还会对它们将接受的来自所有站点的 Cookie 总数作出绝对限制,通常为 300 个。
- 4, Cookie默认情况都会随着Http请求发送到后台服务器,但并不是所有请求都需要Cookie的,比如:js、css、图片等请求则不需要cookie。
Html5的设计者们,一开始就为Html5能成为富客户端做好了准备。为了破解Cookie的一系列限制,Html5通过JS的新的API就能直接存储大量的数据到客户端浏览器,而且支持复杂的本地数据库,让JS简直就是逆天了。Html5支持两种的WebStorage,一种是永久性的本地存储(localStorage),另外一种是会话级别的本地存储(sessionStorage)。
代码加注释来了......
/**
* sessionStorage,localStorage统一的操作方法:
* (1)setItem(key,value):添加本地存储数据。
* (2)getItem(key):通过key获取相应的Value。
* (3)removeItem(key):通过key删除本地数据。
* (4)clear():清空数据。
*/ /**
* 会话级别的本地存储:sessionStorage
*/
sessionStorage.setItem(11,"a");
var numLocal = sessionStorage.getItem(11);
console.info("sessionStorage会话级别的本地存储"+numLocal);
sessionStorage.setItem(22,"b");
console.info("sessionStorage会话级别的本地存储个数:"+sessionStorage.length); sessionStorage.removeItem(22);
console.info("sessionStorage会话级别的本地存储个数:"+sessionStorage.length); //sessionStorage.clear();
console.info("sessionStorage会话级别的本地存储个数:"+sessionStorage.length); /**
* 永久本地存储:localStorage
*/
localStorage.setItem("a",11);
var numLocal = localStorage.getItem("a");
console.info("localStorage永久本地存储"+numLocal);
localStorage.setItem("b",22);
console.info("localStorage本地存储个数:"+localStorage.length); localStorage.removeItem("a");
console.info("localStorage本地存储个数:"+localStorage.length); //localStorage.clear();
console.info("localStorage本地存储个数:"+localStorage.length);
HTML5 Web SQL 数据库
Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。
如果你是一个 Web 后端程序员,应该很容易理解 SQL 的操作。
Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。
代码加注释来了......
/**
* 本地数据库
* 操作本地数据库的最基本的步骤是:
* 第一步:openDatabase方法:创建一个访问数据库的对象。
* 第二步:使用第一步创建的数据库访问对象来执行transaction方法,通过此方法可以设置一个开启事务成功的事件响应方法,在事件响应方法中可以执行SQL.
* 第三步:通过executeSql方法执行查询,当然查询可以是:CRUD。
*/
function dataBaseCRUD(){
var dataBase = openDatabase("school", "1.0", "学校数据库", 1024 * 1024, function () {
console.info("创建学校数据库成功!");
});
/**
* (1)openDatabase方法打开一个已经存在的数据库,如果数据库不存在,它还可以创建数据库。几个参数意义分别是:
* 1,数据库名称。
* 2,数据库的版本号,目前来说传个1.0就可以了,当然可以不填;
* 3,对数据库的描述。
* 4,设置分配的数据库的大小(单位是kb)。
* 5,回调函数(可省略)。
*/
if(!dataBase){
console.info("当前浏览器不支持Html5本地数据库");
return false;
}else{
debugger;
dataBase.transaction(function (ts) {//启动一个事务,并设置回调函数
ts.executeSql("create table if not exists Student(id int,name text null,age int,sex text null)",[],function(ts,result){
console.info("创建数据库成功"+result);
},function(ts,message){
console.info("创建数据库失败",message);
});
}); dataBase.transaction(function (ts) {
ts.executeSql("insert into Student(id,name,age,sex) values(?,?,?,?) ", [1,"小明", 21, "男"], function (ts, result) {
console.info("插入数据成功!"+result);
}, function (ts, message) {
console.info("插入数据失败!"+message);
});
}); dataBase.transaction(function (ts) {
ts.executeSql("insert into Student(id,name,age,sex) values(?,?,?,?) ", [2,"小红", 20, "女"], function (ts, result) {
console.info("插入数据成功!"+result);
}, function (ts, message) {
console.info("插入数据失败!"+message);
});
}); dataBase.transaction(function (ts) {
ts.executeSql("update Student set name = ? where id = ? ", ["小红s",2], function (ts, result) {
console.info("更新数据成功!"+result);
}, function (ts, message) {
console.info("更新数据失败!"+message);
});
}); dataBase.transaction(function (ts) {
ts.executeSql("delete from Student where id = ? ", [2], function (ts, result) {
console.info("删除数据成功!"+result);
}, function (ts, message) {
console.info("删除数据失败!"+message);
});
}); dataBase.transaction(function (ts) {
ts.executeSql("select * from Student ", [], function (ts, result) {
if (result) {
for (var i = 0; i < result.rows.length; i++) {
console.info((result.rows.item(i)));
}
}
console.info("查询数据成功!");
}, function (ts, message) {
console.info("查询数据失败!"+message);
});
});
}
/**
* (2)db.transaction方法可以设置一个回调函数,此函数可以接受一个参数就是我们开启的事务的对象。然后通过此对象可以进行执行Sql脚本,跟下面的步骤可以结合起来。
* (3)通过executeSql方法执行查询。
* ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
* 参数说明:
* 1,sqlQuery:需要具体执行的sql语句,可以是create、select、update、delete;
* 2,[value1,value2..]:sql语句中所有使用到的参数的数组,在executeSql方法中,将s>语句中所要使用的参数先用“?”代替,然后依次将这些参数组成数组放在第二个参数中
* 3,dataHandler:执行成功是调用的回调函数,通过该函数可以获得查询结果集;
* 4,errorHandler:执行失败时调用的回调函数;
*
*/
} dataBaseCRUD();
Html5的Web存储和WebSql的更多相关文章
- HTML5中Web存储
HTML5 中web存储是一个比cookies更好的一个本地存储方式. 那么什么是HTML5存储呢? 使用HTML5可以在本地存储用户浏览的数据,HTML5技术没有出来之前是使用cookies进行本地 ...
- HTML5的web 存储localStorage、sessionStorage
说明 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案.我们可以使用localStorage ...
- html5的web存储
在html5标准之前,web存储信息需要cookie来完成,但是cookie不适合大量数据存储.因为需要等待服务器响应,所以速度慢/效率低. 本地存储的特点: localstorage是仅存储在用户的 ...
- 【html5】Web存储_locaStorage对象的应用
Web存储 html5可以在本地存储用户浏览的数据,数据的存储原理是以 键/值 存储的 存储对象分类 localStorage:没有时间限制的数据存储 sessionStorage:针对一个会话的数据 ...
- HTML5 总结-Web存储-7
HTML 5 Web 存储 在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 ses ...
- 【我的前端自学之路】【HTML5】web 存储
以下为自学笔记内容,仅供参考. 转发请保留原文链接:https://www.cnblogs.com/it-dennis/p/10503539.html 什么是Web存储 cookie最大的缺陷是在每一 ...
- html5的web存储详解
以前我们在本地存储数据都是用document.cookie来存储的,但是由于其的存储大小只有4K左右,解析也很复杂,给开发带来了诸多的不便.不过现在html5出了web的存储,弥补了cookie的不足 ...
- HTML5新增web存储方式
客户端存储数据的两个对象为: 两个对象在使用方式没有任何区别,唯一的不同点蚀储存数据 的有效时间 ①localStorage - 没有时间限制的数据存储 除非手动删除,否则数据将一直保存在本地文件: ...
- html5的web存储与cookie的区别
以下从3个方面进行比较: 1,容量:cookie只有4KB,localStorage和sessionStorage最大容量5M 2,是否会携带到ajax中:cookie由每个对服务器的请求来传递,会影 ...
随机推荐
- path.resolve()和path.join()
resolve 作用:path.resolve() 该方法将一些的 路径/路径段 解析为绝对路径. 语法:path.resolve([...paths]) 说明: ...paths <strin ...
- jquery试题
1.下面哪种说法是正确的? 您的回答:jQuery 是 JavaScript 库 2.jQuery 使用 CSS 选择器来选取元素? 您的回答:正确 3.jQuery 的简写是? 您的回答:$ 符号 ...
- spring cloud要点简介及常用组件
spring cloud基于spring boot spring cloud是通过包装其他技术框架实现的,例如OSS组件,实现了一套通过基于注解.java配置和基于模板开发的微服务框架. spring ...
- 20145324 《Java程序设计》第6周学习总结
20145324 <Java程序设计>第6周学习总结 教材学习内容总结 第十章 1.使用输入串流将数据从来源取出 InputStream 使用输出串流将数据写入目的地 OutStream ...
- 20145327 《Java程序设计》第一周学习总结
20145327 <Java程序设计>第一周学习总结 教材学习内容总结 Java根据领域不同,区分为Java SE.Java EE与Java ME三大平台.Java SE是各应用平台的基础 ...
- 20145328 《Java程序设计》第6周学习总结
20145328 <Java程序设计>第6周学习总结 教材学习内容总结 输入/输出 InputStream与OutputStream 从应用程序角度来看,如果要将数据从来源取出,可以使用输 ...
- Win7下硬盘安装fedora17
Win7下硬盘安装fedora17 这几天经过很多次的百度和实验,终于成功的在我的x64机子上装上了fedora17,以此分享给大家,希望能给大家帮助. 一.准备工作: 1.工具,因为我们电脑上大部分 ...
- [BZOJ1058]报表统计
Description 小Q的妈妈是一个出纳,经常需要做一些统计报表的工作.今天是妈妈的生日,小Q希望可以帮妈妈分担一些工 作,作为她的生日礼物之一.经过仔细观察,小Q发现统计一张报表实际上是维护一个 ...
- 解题报告:poj1061 青蛙的约会 - 扩展欧几里得算法
青蛙的约会 writer:pprp Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 119716 Accepted: 25238 ...
- base64 原理
Base64编码之所以称为Base64,是因为其使用64个字符来对任意数据进行编码,同理有Base32.Base16编码.标准Base64编码使用的64个字符为: 这64个字符是各种字符编码(比如AS ...