Web持久化存储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限制

注意是总数据量,属性个数不限,我试过写到100000条数据(val仅两个字符),是可以写入的。

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是所有持久化存储支持最好的。可根据它们本身的特性选择自己需要使用的方式。

 

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

本文地址 :http://www.cnblogs.com/lovesong/p/4976233.html

 


本文转自 海角在眼前 博客园博客,原文链接: http://www.cnblogs.com/lovesong/p/4976233.html  ,如需转载请自行联系原作者


相关文章
|
20天前
|
SQL 开发框架 .NET
ASP.NET Web——GridView完整增删改查示例(全篇幅包含sql脚本)大二结业考试必备技能
ASP.NET Web——GridView完整增删改查示例(全篇幅包含sql脚本)大二结业考试必备技能
27 0
|
2月前
|
SQL 关系型数据库 MySQL
ctfshow-web2(SQL注入)
ctfshow-web2(SQL注入)
27 0
|
3月前
|
SQL 安全 关系型数据库
危险!!!也许你的web网站或服务正在悄无声息地被SQL注入
危险!!!也许你的web网站或服务正在悄无声息地被SQL注入
|
3月前
|
SQL 安全 JavaScript
互联网并发与安全系列教程(05) - 常见的Web安全漏洞(XSS攻击、SQL注入、防盗链)
互联网并发与安全系列教程(05) - 常见的Web安全漏洞(XSS攻击、SQL注入、防盗链)
44 0
|
4月前
|
SQL 存储 Java
JSP商家餐饮管理系统myeclipse开发sql数据库web结构java编程
JSP 商家餐饮管理系统 是一套完善的web设计系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。 商场餐饮管理系统就是专门为商场和餐饮店主量身打造的一款电子商务系统,商场可以通过它来管理商场的美食广场,商场餐饮管理能能够使居民享受到餐厅美食,既方便了顾客,也节约了时间,提高了效率,也解决了普通商场美食广场出现的问题
21 0
|
4月前
|
SQL 前端开发 Java
JSP软件产品管理系统myeclipse开发sql计算机程序web结构java编程网页源码
JSP软件产品管理系统是一套完善的毕业设计系统(servlet+dao+bean模式开发)MVC结构,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发
27 0
|
4月前
|
SQL Java 数据库
JSP汽车销售管理系统myeclipse开发sql计算机程序web结构java编程网页源码
JSP 汽车销售管理系统 是一套完善的web设计系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发
39 0
|
4月前
|
SQL Java 应用服务中间件
JSPOA信息管理系统myeclipse开发sql计算机程序web结构java编程网页源码
JSPOA信息管理系统 是一套完善的web设计系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。
20 0
|
4月前
|
SQL Java 数据库
JSP课程管理系统选课myeclipse开发sql数据库web结构java编程
JSP 课程管理系统(成绩和选课) 是一套完善的web设计系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。
32 0
|
4月前
|
SQL Java 数据库
JSP考勤管理系统myeclipse开发sql数据库web结构java编程
JSP考勤管理系统是一套完善的web设计系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。
24 0