关于HTML5本地持久化存储的Web SQL、Local Storage、Cookies技术

在浏览器客户端记录一些信息，有三种常用的Web数据持久化存储的方式，分别是Web SQL、Local Storage、Cookies。

Web SQL

作为html5本地数据库，可通过一套API来操纵客户端的数据库（关系数据库），下面是支持浏览器情况。

鉴于PC浏览器支持情况，我找了淘宝、京东、携程、起点、优酷网站，并没有用Web SQL记录客户端信息。在移动端比较适用，特别是对于Hybrid应用，更是得心应手。

接口：

openDatabase

transaction

executeSql

1.打开连接并创建数据库

var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });

2.创建数据表

dataBase.transaction( function(tx) {
tx.executeSql(
"create table if not exists stu (id REAL UNIQUE, name TEXT)",
[],
function(tx,result){ alert('创建stu表成功'); },
function(tx, error){
alert('创建stu表失败:'   error.message);
});
});

3.添加数据

dataBase.transaction(function (tx) {
tx.executeSql(
"insert into stu (id, name) values(?, ?)",
[1, '徐明祥'],
function () { alert('添加数据成功'); },
function (tx, error) {
alert('添加数据失败: '   error.message);
});
});

4.查询数据

dataBase.transaction(function (tx) {
tx.executeSql(
"select * from stu", [],
function (tx, result) { //执行成功的回调函数
//在这里对result 做你想要做的事情吧...........
    },
function (tx, error) {
alert('查询失败: '   error.message)
});
});

特点：

1.有事务

2.查询数据，返回数据类型正确

3.被W3C丢弃的规范，但被广泛支持。

Local Storage

HTML5提供了没有时间限制在客户端存储数据的手段，以键值对存取，网站只能访问其自身的数据，浏览器支持如下。

PS：截图来自网上资料

有个比较有趣的东西，我在起点、京东、优酷的localStorage找个共同的变量，就是jw_bl，里面的数据是（我猜不到这个属性是什么简写的）：

{"created" : "Sat Nov 14 2015 23:52:10 GMT 0800 (中国标准时间)" , "expiration" : "Sat, 21 Nov 2015 10:51:54 -0500" , "reason" : "0"}

写数据：

localStorage.pagecount=123;

读数据：

localStorage.pagecount;  // return "123"

PS：要注意的是，获取localStorage的值是字符串，不管你赋值的是什么类型。

特点：

1. 获取值是字符串类型

2. 容量有大约5M限制

3. 不会进行网络传输

Cookies

Cookies是最常用的Web数据持久化手段，所有浏览器都支持。Cookie是由服务器端生成，发送给User-Agent（一般是浏览器），浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该Cookie给服务器（前提是浏览器设置为启用cookie）。单点登录（SSO）是个很经典的使用。

PS：当然也可以在网页设置cookies

Cookie数量和长度的限制

每个domain最多只能有20条（某些浏览器会多一些）cookie，每个cookie长度不能超过4KB，否则会被截掉。

Cookie生命周期

Cookie在生成时就会被指定一个Expire值，这就是Cookie的生存周期，在这个周期内Cookie有效，超出周期Cookie就会被清除。将Cookie的生存周期设置为“0”或负值，就马上清除Cookie。

Cookie安全性问题

如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。或者是可收集这些信息做一些事。

Cookies请求附带

Cookies每次请求会被发送到服务器，占用额外带宽，示例参数如下（截了一个斗鱼网站请求的图）。

PS：cookies参数需要使用抓包工具（类似fiddler）才能看到，Chrome开发者调试工具看不到的。

Cookies的Javascript编程

下面代码来自网上资料：

创建cookies：

function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() expiredays);
document.cookie=c_name "=" escape(value) ((expiredays==null)?"":";expires=" exdate.toGMTString());
}

取值cookies：

function getCookie(c_name)
{
if(document.cookie.length>0) {
c_start=document.cookie.indexOf(c_name "=");
if(c_start!=-1) {
c_start=c_start c_name.length 1;
c_end=document.cookie.indexOf(";",c_start);
if(c_end==-1)
c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}

删除cookies：

setCookie("acf_nickname", null , -1);

清除所有cookies：

因为cookies值可能存在“;=”字符，所以清除的函数还没一那么简单，要照着自己工程看着写。

总结

Web SQL一般在移动端使用，localStorage PC和移动端都适用，而cookies是所有持久化存储支持最好的。可根据它们本身的特性选择自己需要使用的方式。

关于HTML5本地持久化存储的Web SQL、Local Storage、Cookies技术相关推荐

HTML5 离线存储之Web SQL
HTML5 在离线存储之Web SQL 本篇没有考虑异步,多线程及SQL注入 WebDatabase 规范中说这份规范不再维护了,原因是同质化(几乎实现者都选择了Sqlite), 且不说这些,单看在H ...
HTML5客户端数据存储机制Web Storage和Web SQL Database
引言 html5本地存储可以选择两种方式,一种是本地存储,一种是sqlite. 比如开发html5的购物车功能,就可以考虑选择其中之一,进行本地存储与操作. 又或者保存用户登录信息,可以使用local ...
html5 本地批量存储,HTML5本地存储
什么是HTML5存储? 简单地说,它是一种让web页面在浏览器端本地化存储键值对的方式.跟cookies一样,即使你从网站导航到别的网站,关掉了浏览器的tab页,退出了浏览器,数据依然存在:与cook ...
c语言本地存储文件路径,本地持久化存储
一.沙盒机制沙盒是什么每个iOS应用都有属于自己的应用沙盒(沙盒就是文件系统目录),与其他文件系统隔离,每个应用都只能访问自己的沙盒. 沙盒的路径结构 Document:适合存储重要的数据, iT ...
HTML5 本地存储
HTML5 本地存储 1.sessionStorage 2.localStorage 3.Database Storage 4.globalStorage 5.兼容性参考文献本地持久化存储一直是本 ...
HTML5的数据存储和数据处理的功能有,浅析 HTML5 数据存储的方法及应用
原标题:浅析 HTML5 数据存储的方法及应用 1 HTML5 本地存储简介中新增的功能之一是本地,使用本地数据库可以在客户端本地建立一个数据库,该数据库以前是必须要保存在服务器端数据库中的内容 ...
php cookie使用实例h5,html5实现数据存储实例代码
html5数据存储就目前为止实现客户端存储的方式是多种多样,最简单而且兼容性最佳的方案是cookies,但是作为真正的客户端存储,cookies还存在一些不足.大小cookie的大小被限制在4KB. ...
容器持久化存储训练营”启动倒计时！3天攻破K8s难点
根据 CNCF 最新调查结果,企业在生产环境中使用 Kubernetes 的比例从 78% 提高到了 83%,Kubernetes 作为云原生的核心平台,吸引了越来越多的开发者去了解.学习和掌握. 在 ...
【k8s的持久化存储】PV、PVC、StorageClass讲解
一.PV和PVC的引入 Volume 提供了非常好的数据持久化方案,不过在可管理性上还有不足. Pod 通常是由应用的开发人员维护,而 Volume 则通常是由存储系统的管理员维护.开发人员要获得上面 ...

关于HTML5本地持久化存储的Web SQL、Local Storage、Cookies技术

关于HTML5本地持久化存储的Web SQL、Local Storage、Cookies技术相关推荐

最新文章

热门文章