HTML 5中的存储及离线应用（四）

最新推荐文章于 2024-10-30 09:15:46 发布

Soloman

最新推荐文章于 2024-10-30 09:15:46 发布

阅读量1.4k

点赞数

分类专栏： Android移动开发 HTML5/CSS/JavaScript 文章标签：存储 html function javascript input class

Android移动开发同时被 2 个专栏收录

77 篇文章 0 订阅

订阅专栏

HTML5/CSS/JavaScript

36 篇文章 0 订阅

订阅专栏

好吧，目前看起来咱们还是老老实实用Local Storage和Session Storage吧，还是这两看起来靠谱一些。

那么我们在使用Local Storage的时候经常遇到如下的情况：

在一个页面中数据发生了改变，另一个页面不会实时去刷新数据导致两个页面的数据不同步；

这种情况下我们就需要用到存储事件。

接着我们将讲解事件的使用，看代码：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- 
    template.html by Bill Weinman 
    <http://bw.org/contact/>
    created 2011-04-16

    Copyright (c) 2011 The BearHeart Group, LLC
    This file may be used for personal educational purposes as needed. 
    Use for other purposes is granted provided that this notice is
    retained and any changes made are clearly indicated as such. 
-->

<head>
    <title>
        localStorage example
    </title>
    <link rel="stylesheet" type="text/css" href="../CSS/main.css">
    <script language="javascript" src="../Javascript/bwH5LS.js"></script>
    <script language="javascript">
        var t = new bwTable();
        var db = getLocalStorage() || dispError('Local Storage not supported.');
        var addEL = getAddEventListener();

        function getLocalStorage() {
            try {
                if( !! window.localStorage ) return window.localStorage;
            } catch(e) {
                return undefined;
            }
        }

		// 确保可以使用window.addEventListener
        function getAddEventListener() {
            try {
                if( !! window.addEventListener ) return window.addEventListener;
            } catch(e) {
                return undefined;
            }
        }
		
		// 消息处理
        function eventHandler(e) {
            eventStatus('Event triggered: ' + e.url + ' ' + 
                e.storageArea.traveler + ' ' + e.storageArea.destination + ' ' + e.storageArea.transportation);
            dispResults();
        }
		
		// 添加状态显示区域
        function eventStatus(s) {
            if(s) element('eventResult').innerHTML = s;
            else element('eventResult').innerHTML = 'Event status:';
        }

        function dispResults() {
            if(errorMessage) {
                element('results').innerHTML = errorMessage;
                return;
            }

            if(db) {
                var t = new bwTable();
                t.addRow( ['traveler', db.getItem('traveler')] );
                t.addRow( ['destination', db.getItem('destination')] );
                t.addRow( ['transportation', db.getItem('transportation')] );
                element('results').innerHTML = t.getTableHTML();
            }
            element('travelForm').elements['traveler'].focus();
            element('travelForm').elements['traveler'].select();
        }

        function dbGo() {
            if(errorMessage) return;
            var f = element('travelForm');
            db.setItem('traveler', f.elements['traveler'].value);
            db.setItem('destination', f.elements['destination'].value);
            db.setItem('transportation', f.elements['transportation'].value);
            eventStatus();
            dispResults();
        }

        function dbClear() {
            if(errorMessage) return;
            db.clear();
            dispResults();
        }
        
        function initDisp() {
            if(addEL) {
				// 添加数据存储消息处理函数
                addEL('storage', eventHandler, false);
            } else {
                element('eventResult').innerHTML = 'This browser does not support event listeners';
            }
            dispResults();
        }

        window.onload = function() {
            initDisp();
        }
    </script>
</head>

<body>

<div id="content">

    <h1> 
        localStorage example
    </h1>
    
    <div id="form">
        <form id="travelForm">
            <table class="form">
                <tr><td class="label"> Traveler </td><td> <input type="text" name="traveler" /> </td></tr>
                <tr><td class="label"> Destination </td><td> <input type="text" name="destination" /> </td></tr>
                <tr><td class="label"> Transportation </td><td> <input type="text" name="transportation" /> </td></tr>
                <tr><td colspan="2" class="button">
                    <input id="formSubmit" type="button" value="Clear" onClick="javascript:dbClear()" />
                    <input id="formSubmit" type="button" value="Go" onClick="javascript:dbGo()" />
                </td></tr>
            </table>
        <input id="inputAction" type="hidden" name="action" value="add" />
        <input id="inputKey" type="hidden" name="key" value="0" />
        </form>
    </div>

    <p class="message" id="eventResult">Event status:</p>
    
    <div id="results">
    <!-- results show here -->
    </div>
    
</div>
</body>
</html>