HTML5 Web Storage -- 让Cookies看起来如此古老

彭博 发布于 2012/10/08 11:39
阅读 7K+
收藏 65

在此两部分组成的系列中,我们将来看看HTML5 规范中最棒而且最有趣的特性之一的Web Storage。我们将看看Web Storage 和 Cookies的历史,并从考虑以下几点:

*Cookies 怎么样又为何被使用

*Web Storage 的长处与限制

*当前浏览器对Web Storage 与 Cookies的支持度

*未来在web app中管理事务状态

*如何利用Web Storage构建离线app

由于该系列是需要动手实践的,我们将一起通过简单的程序来利用Web Storage。我们将利用它创建在线或离线都可用的应用,这样你就可以在四处使用它了。

Cookies 历史简短介绍

Mosaic Netscape Browser

Cookies 于1994年作为 Mosaic Netscape 浏览器beta 0.9 版的一部分被引入,Netscape的客户MCI想要找到一种方式来保持状态,但不是在服务器端。Cookies作为技术解决手段被选中了。

Cookies在形式和结构上都很简单,是一种有效的解决手段,它允许在用户计算机上存储小段文本信息。这些存储的信息能够使得网站提供更加个性化的体验,例如:

*保持登录

*保持上次查看的页面

*浏览计数

*广告追踪

*购物车的状态保持

Cookies是如何起效的?

当浏览器从web的回应到页面请求中接收到一个 Set-Cookie 头部时Cookies便创建了:

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: page_loaded=25; Expires=Wed, 09 Jun 2021 10:18:14 GMT

浏览器接收到表明回应成功的 HTTP 200 代码,以及回应的内容类型。同事也接收到了 Set-Cookie头部,并创建了一个一下结构的cookie:

Set-Cookie header

除非在Wed, 09 Jun 2021 10:18:14前刷新,否则cookie将在这以后无效并被浏览器移除。如果它没有被终止,在将来所有的该网站的请求中都将携带类似的信息头部:

GET /spec.html HTTP/1.1
Host: www.example.org
Cookie: page_loaded=25;

在设置cookie的时候有很多的选项可以指定。这些包括域名、路径和是否安全或者HttpOnly。

Cookies趋势下滑

先不管那些很明显的优势和简洁性,cookie一直在潜在隐私和安全影响方面有一个坏名声。他们很容易受到安全问题攻击影响,例如关键攻击载体的CSRF(Cross Site Request Forgery),XSS(Cross Site Scripting Attacks) 以及 Session Hijacking 。一个用功且专业的开发者也许不会把很多安全细节信息放在cookie中,或者实现一系列的方法来减轻可能的这些形式的攻击。

Cookies 不应该被看做是种自动的威胁。没有它们,很多我们期待的web个性化都将变得不可能。

HTML5 存储简介

HTML5引入了Web Storage作为Cookies的替代,这种存储有两种类型:local 和 session:

Local and Session

你可以根据你程序的重点选择最适合你目标的存储方式。正如cookies一样,HTML5存储有自己的优势以及缺陷。

Web Storage 的缺陷

*数据以简单字符串存储;操作所需的存储不同类型的对象,例如booleans,objects,ints和floats。

*默认5MB存储限制;如果需要时可有用户允许获取更多存储。

*可被用户或者系统管理员禁用

*复杂数据集合存储可能很慢

Web Storage 的长处

*App 可以再在线或离线情况下使用

*拥有简单好用易学的API

*能够对浏览器使用事件钩子,例如offline,online,storage change

*比cookies更便于管理,没有额外的的请求头部数据

*提供更大的空间以存贮日益剧增的复杂数据

Web Storage API

Web Storage API 简单易学,它只包含四个方法:

Web Storage API Methods

 这些方法为我们提供了所有使用本地存储所需要的。正如编码中的所有东西一样,我们可以创建类和对象或者使用第三方的库来是的交互更加精致。

要使得使用Web Storage很简单,你可以使用第三方库之一例如ModernizrjStorage

浏览器事件

HTML5 暴露了很多开发者可以使用的很多事件,在此文中,我们将看到 offline 和 online。

安全性

HTML5 可能很闪耀并且是崭新的,但是这不意味着比以前更加的安全。记住需要为Cookies做的那些安全考虑。在重要的是,不要将敏感信息存放在Web Storage里!我知道这无需多言,但是值得重复提醒。

正如Cookies一样,用户可以查看这些信息并将其删除,而且这些信息仍然是跨站脚本攻击的目标。所以使用它是要多费点心思。

Web Storage的一个关键的改进就是提供local 和 session的区别存储。Session 存储当窗口关闭或者标签关闭时将会移除所有存储信息。Local 存储将在标签间以及窗口绘画保持信息。通过在标签或者窗口关闭而将数据的自动移除的方式,我们能够获得一个更加安全的存储环境,我强调一下,是更安全,而不是安全。

在使用时使其更加简单能够获得附加的好处,如果我们清楚我们只需要短时间的存储,那么我们可以将其放在交互式时也许会被自动清理的部分。但是不要因此养成懒惰草率的编码习惯。

浏览器支持

虽然本地存储是一个相当不错的进展,但是这不意味着所有的浏览器都同样地支持它。以下表格展示了主流浏览器哪些版本开始支持它。

现如今所有的现代浏览器都支持本地存储,但是你需要考虑旧的版本。

Browser Support for HTML5

为何HTML5存储将是事务状态的未来?

根据我们已经提到的一些原因,我相信HTML5存储将是事务状态的未来,这主要是由无法抑制的移动互联网的崛起驱动的(纵观 iOS,Android 和 Windows Phone 7智能手机可知)。

正如你所见到的下面的表格,智能手机数量的全球销售数额在2011年的Q4停滞不前。

 

Smartphone Sales to End Users by Operating System

通过这些数字的判断,用不了多久这些设备将最终取代桌面互联网的使用。可问题是,我们无法保证总是联网的。间歇性地信号覆盖太常见了。

无论我们是在地铁网络中,或者乘飞机环行世界或者在更多的偏远的国家地区,在那里数据漫游变得效率更低,在很多条件下我们都没法保证持久的网络连接。

第二,不想很多情况下的iOS 5 的升级以及潜在的 Windows Phone,Android手机耗电可是出了名的。所以需要做的越少那么需要传输和接受的数据就越少,这将直接让终端用户体会到最为有效和反应快速的app。

本地存储能够让我们以多种方式使用,如下:

*不必在每次请求时都带上Cookies信息

*可以在无数据连接的情况下使用,并且能够在与服务器连接恢复后合并离线状态

*可以存储和操作更多的本地信息

一个简单的应用

现在我们已经大致了解和介绍了一些关于什么是web存储以及它能干什么,现在让我们着手做一个应用来用用它。该应用是一个在线或者离线都可用的简单用户列表。

该应用从一段 PHP 脚本中检索一个用户列表,get-records.php.它将这些信息保存在本地存储中,然后通过简单的jQuery函数调用将这些数据呈现在表格中,所以用户便可以看到当前可用的用户列表。

一个用户可以添加一个3bits的新用户信息:姓,名以及email地址。当表单被提交后,这些信息将被发送到add-record.php。SQLite 数据库将被更新然后将为这些信息构建一个请求,重新获取记录列表并重新显示用户信息。

该应用不是最有效的方式,但是它能够在浏览器在线或者离线时进行跟踪,并是的表格在任何一种方式下都能有效。如果该应用离线,表单数据将会被存储在第二个记录里,并随时准备在浏览器恢复到在线时通过add-record.php存储到数据库,并清除数据和重新获取页面数据。

看一下下面的代码,你便会知道是怎样处理的:

<script type="text/javascript">
 
    /* PHP scripts to call */
    var getRecords = 'get-records.php';
    var addRecords = 'add-record.php';

这是一小段我们用来交互的PHP代码段。

function supports_html5_storage() {
  try {
    return 'localStorage' in window && window['localStorage'] !== null;
  } catch (e) {
    return false;
  }
}

上面的代码能够快速的检测HTML5本地存储是否可用,如果返回false,那么就不可用了。

function clearPrimaryCache()
{
    localStorage.removeItem('records.user.hasRecords');
    localStorage.removeItem('records.user.records');
}
 
function clearOfflineCache()
{
    localStorage.removeItem('records.user.local.records');
    localStorage.removeItem('records.offline.status');
}

这里有两个我们主要用到的缓存:一个用于在线数据对用户的显示,另外一个用于离线数据。分开清除每一个都很简单。

 

function getRecords()
{
    if (!supports_html5_storage()) {
        return false;
    }
 
    $(function()
    {
        $(document).ready(function()
        {
            $.getJSON(getRecords, function(data) {
                clearPrimaryCache();
                var records = [];
                records.push(data.records);
                if (records.length !== 0) {
                    localStorage.setItem('records.user.records', JSON.stringify(records));
                    localStorage.setItem('records.user.hasRecords', JSON.stringify(true));
                }
            });
            return false;
        });
    });
}

然后我们通过 get-records.php 检索数据记录,并清除原来的缓存,缓存检索的记录,然后设置一个变量表明我们的可用记录。

function showCurrentRecords()
    {
        if (!supports_html5_storage()) {
            return false;
        }
 
        var hasRecords = JSON.parse(localStorage.getItem("records.user.hasRecords"));
        if (!hasRecords) {
            $('#current-records > tbody').append('
 
<tr>
<td colspan="4">No Records available</td>
</tr>
 
');
        } else {
            var userRecords = JSON.parse(localStorage.getItem("records.user.records"));
            $.each(userRecords[0], function(index, row) {
                $('#current-records > tbody').append(
                    '
 
<tr>
<td>' + (index + 1) + '</td>
<td>' + row.firstname + '</td>
<td>' + row.lastname + '</td>
<td>' + row.emailaddress + '</td>
</tr>
 
'
                );
            });
        }
    }

上面的代码将当前可用的记录从缓存中取出并呈现到页面上。我们检查记录是否可用,如果可用则构建一个简单的HTML表格。

function clearRecords(){
    $("#current-records > tbody > tr").remove();
}

现在我们清除HTML 表格中的存在的记录。

function reloadRecords(){
    getRecords();
    clearRecords();
    showCurrentRecords();
}

这是一个简单的工具方法,它使我们能够从PHP脚本中检索数据,移除HTML表单中已存在的记录,重建查询到的记录。

function goOnline()
{
    // persist the local records to the remote and clear the buffer
    var userRecords = JSON.parse(localStorage.getItem("records.user.local.records"));
 
    // process any records retrieved
    if (userRecords.length >= 1) {
        $.each(userRecords, function(index, row) {
            var dataString = 'firstname='+ row.firstname + '&lastname=' + row.lastname + '&emailaddress=' + row.emailaddress;
            $.ajax({
                type: "POST",
                url: "add-record.php",
                data: dataString,
                success: function() {
                    reloadRecords()
                }
            });
        });
 
        // clear out the offline cache after processing
        clearOfflineCache();
 
        // reload the records so that the user sees them
        reloadRecords();
    }
 
    // set the indicator flag to show that we're now online
    localStorage.setItem('records.offline.status', JSON.stringify('online'));
}

goOnline 使得检测到在线状态时令应用在线。它检索任何被缓存的记录并通过调用 add-records.php脚本存储他们,清除离线缓存并调用reloadRecords函数,它将重新渲染数据让用户看到数据变化和更新。它最终将把状态指示器设置为online。

function goOffline()
    {
        localStorage.setItem('records.offline.status', JSON.stringify('offline'));
    }
 
goOffline takes the application offline by setting the status indicator appropriately.
    function isOffline()
    {
        var offlineStatus = JSON.parse(localStorage.getItem("records.offline.status"));
        if (offlineStatus) {
            return true;
        }
        return false;
    }

isOffline 检测离线指示器 如果浏览器离线则返回true,如果在线则返回false

function persistRemotely()
{
    var firstname = $("input#firstname").val();
    var lastname = $("input#lastname").val();
    var emailaddress = $("input#emailaddress").val();
    var dataString = 'firstname='+ firstname + '&lastname=' + lastname + '&emailaddress=' + emailaddress;
 
    // if online, submit to remote script
    $.ajax({
        type: "POST",
        url: "add-record.php",
        data: dataString,
        success: function() {
            reloadRecords()
        }
    });
    return false;
}

persistRemotely将保存从提交表单中获取的记录。它从姓,名以及email地址域中获取值,构建一个简单的数据查询字符串作为request的POST数据,并通过AJAX提交到add-records.php脚本。

function persistToOfflineCache()
{
    var firstname = $("input#firstname").val();
    var lastname = $("input#lastname").val();
    var emailaddress = $("input#emailaddress").val();
 
    // retrieve the locally persisted records
    var records = JSON.parse(localStorage.getItem("records.user.local.records"));
 
    // parse the string to a json array
    var userRecord = {'firstname':firstname,'lastname':lastname,'emailaddress':emailaddress};
 
    if (records != null) {
        // store the record in the local records
        records.push(userRecord);
    } else {
        var records = [];
        // store the record in the local records
        records.push(userRecord);
    }
 
    // write the information back to local storage
    localStorage.setItem('records.user.local.records', JSON.stringify(records));
}

persistToOfflineCache缓存浏览器离线时的表单数据。跟persistRemotely一样,它将检索到的表单输入以JSON对象添加到离线缓存中,如果已存在记录,则把它添加进去,如果没有,则创建带有第一个记录的离线缓存。

$(document).ready(function() {
 
        // intercept the online event
        window.addEventListener("online", function() {
            goOnline();
        }, true);
 
        // intercept the offline event
        window.addEventListener("offline", function() {
            goOffline();
        }, true);
 
        // intercept the form submit event
        $('form').submit(function() {
            if (isOffline()) {
                persistToOfflineCache();
            } else {
                persistRemotely();
            }
            $('#recordsform').reset();
          return false;
        });
    });
 
    getRecords();
// ]]></script>

这是个应用测试工具,当页面完全加载后,我们侦听online 和 offline事件,并分别调用goOnline 和 goOffline。

根据当前浏览器状态我们拦截表单提交方法并调用persistToOfflineCache 或者 persistRemotely ,在其中一个被调用后重置表单防止标准表单反应的调用。

PHP 脚本

用来添加和存储记录的PHP脚本都很琐碎。正如你所看到的,这些记录都被存储在SQLite(3)数据库中。

add-records.php脚本查询POST 数据,让后使用准备好的语句插入记录到数据库中。get-records.php 从数据库中查询所有存在的记录并通过json编码输出。

add-record.php

 

<!--?php // Set default timezone date_default_timezone_set('UTC'); $dsn = "sqlite:databases/mydb.sq3"; try {     $dbh = new PDO($dsn);     // Set errormode to exceptions     $dbh--->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    echo 'Connection failed: ' . $e->getMessage();
}
 
$userList = null;
 
// Select all data from file db messages table
$result = $dbh->query('SELECT * FROM users');
 
if (!empty($_POST['firstname']) && !empty($_POST['lastname']) && !empty($_POST['emailaddress'])) {
    $sql = "INSERT INTO users (firstname, lastname, emailaddress) VALUES (:firstname, :lastname, :emailaddress)";
    $q = $dbh->prepare($sql);
    $q->execute(array(
        ':firstname' => $_POST['firstname'],
        ':lastname' => $_POST['lastname'],
        ':emailaddress' => $_POST['emailaddress']
    ));
}

get-records.php

 

<!--?php // Set default timezone date_default_timezone_set('UTC'); $dsn = "sqlite:databases/mydb.sq3"; try {     $dbh = new PDO($dsn);     // Set errormode to exceptions     $dbh--->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    echo 'Connection failed: ' . $e->getMessage();
}
 
$userList = null;
 
// Select all data from file db messages table
$result = $dbh->query('SELECT * FROM users');
foreach ($result as $row) {
    $userList['records'][] = array(
        "firstname" => $row['firstname'],
        "lastname" => $row['lastname'],
        "emailaddress" => $row['emailaddress']
    );
}
 
print json_encode($userList);

App 运行

没有截图的应用是不完整的,所以下面便是应用的截图了,继续了不起的Twitter Bootstrap 项目,一个简单的导航菜单下跟着的是表单,最后是当前的记录。

Bootstrap, from Twitter

结论

我希望本文能够给你一个对HTML5强大而灵活的Web Storage的不错介绍,并让你一瞥它可能怎么被使用,并了解到在日益增长的移动互联网需求下为何它是如此重要。

原文链接  / OSCHINA.NET原创翻译

加载中
0
BossKiller
BossKiller
默认5MB,已经比Cookies强多了
0
BaiYang
BaiYang

Web Storage 和 cookie 完全是面向不同场景,用来解决不同问题的吧?

用 cookie 存放一些需要客户端持久化的东西显然不方便,但用 WS 做 session 保持同样是自找麻烦。

0
庞鹤峰
庞鹤峰
应用在交互式应用里很棒,展示式的还是用cookie吧。
0
李惟
李惟

帮你补充一个原文地址:

http://blog.newrelic.com/2012/09/18/html5-web-storage-cookies-are-so-1994/

彭博
彭博
原来如此
李惟
李惟
回复 @彭博 : 你应该有看到你发的那篇文章地址有一个source,链接到http://blog.newrelic.com/2012/09/18/html5-web-storage-cookies-are-so-1994/
彭博
彭博
谢谢了 ,不过 最后边不是有个原文链接么 貌似跟你这个链接不同哦
0
李惟
李惟

本地写了一遍有两个问题:

1.代码中只监听了window的online和offline,那么什么时候会触发online和offline呢?

2.后调用函数getRecords,实际是不是应该是reloadRecords呢?因为getRecords只是去获取数据记录到本地,但是要将数据更新到页面上完整的应该是reloadRecords

3.这个好像也不是离线应用,分析下代码执行过程,如下:

页面打开 -> 从服务器get Json数据 -> 记录到本地 -> 清除页面 -> 将本地数据信息展示出来

如果每次打开页面都这么执行,和我直接打开 -> 传输数据展示出来 有什么区别呢?

返回顶部
顶部