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