关于html5的问题，高分求教！！！！

sharpmanmbw 2012-03-06 06:11:32

html5有一个离线缓存api,这个api是为了方便用户在离线时也能浏览网页，但不知当浏览器在线时，是否一定从服务器下载（哪怕已经将文件离线缓存），有没有办法让浏览器在线时也读取离线缓存的文件，而不访问服务器，实现类似于http缓存的功能（这样一来就可以在手机浏览器上缓存html,js，css等不变的文件，减少手机浏览器的流量负担）。

...全文

207 17 打赏收藏转发到动态举报

写回复

用AI写文章

17 条回复

切换为时间正序

请发表友善的回复…

发表回复

wood87654321 2012-03-08

打赏
举报

localstorage本身并没有实现你那种需求的能力，但HTML5对象要通过js控制，而你这种需求的js代码思路又是什么呢？比如，你难道不可以把所有对象的事件响应代码都设为读取localstorage？只有当读取不到数据时再
if(navigator.onLine){
访问服务器读取文件
}

Mo_Qian 2012-03-08

打赏
举报

没搞过html5

hw287252422 2012-03-08

打赏
举报

网上扒下来的不知道够用否？？



<!doctype html>

<html manifest="StickyNotes.manifest">

<head>

<title>WebKit HTML 5 SQL Storage Notes Demo</title>

<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

<meta name="apple-mobile-web-app-capable" content="yes"/>

<style>

body {

    font-family: 'Lucida Grande', 'Helvetica', sans-serif;

}



.note {

    background-color: rgb(255, 240, 70);

    height: 250px;

    padding: 10px;

    position: absolute;

    width: 200px;

    -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);

}



.note:hover .closebutton {

    display: block;

}



.closebutton {

    display: none;

    background-image: url(deleteButton.png);

    height: 30px;

    position: absolute;

    left: -15px;

    top: -15px;

    width: 30px;

}



.closebutton:active {

    background-image: url(deleteButtonPressed.png);

}



.edit {

    outline: none;

}



.timestamp {

    position: absolute;

    left: 0px;

    right: 0px;

    bottom: 0px;

    font-size: 9px;

    background-color: #db0;

    color: white;

    border-top: 1px solid #a80;

    padding: 2px 4px;

    text-align: right;

}

</style>

<script>

var db = null;



try {

    if (window.openDatabase) {

        db = openDatabase("NoteTest", "1.0", "HTML5 Database API example", 200000);

        if (!db)

            alert("Failed to open the database on disk.  This is probably because the version was bad or there is not enough space left in this domain's quota");

    } else{

        alert("Couldn't open the database.  Please try with a WebKit nightly with this feature enabled");

	}

} catch(err) {

    db = null;

    alert("Couldn't open the database.  Please try with a WebKit nightly with this feature enabled");

}



var captured = null;

var highestZ = 0;

var highestId = 0;



function Note()

{

    var self = this;



    var note = document.createElement('div');

    note.className = 'note';

    note.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);

    note.addEventListener('click', function() { return self.onNoteClick() }, false);

    this.note = note;



    var close = document.createElement('div');

    close.className = 'closebutton';

    close.addEventListener('click', function(event) { return self.close(event) }, false);

    note.appendChild(close);



    var edit = document.createElement('div');

    edit.className = 'edit';

    edit.setAttribute('contenteditable', true);

    edit.addEventListener('keyup', function() { return self.onKeyUp() }, false);

    note.appendChild(edit);

    this.editField = edit;



    var ts = document.createElement('div');

    ts.className = 'timestamp';

    ts.addEventListener('touchstart', function(e) { return self.onMouseDown(e) }, false);

    note.appendChild(ts);

    this.lastModified = ts;



    document.body.appendChild(note);

    return this;

}



Note.prototype = {

    get id()

    {

        if (!("_id" in this))

            this._id = 0;

        return this._id;

    },



    set id(x)

    {

        this._id = x;

    },



    get text()

    {

        return this.editField.innerHTML;

    },



    set text(x)

    {

        this.editField.innerHTML = x;

    },



    get timestamp()

    {

        if (!("_timestamp" in this))

            this._timestamp = 0;

        return this._timestamp;

    },



    set timestamp(x)

    {

        if (this._timestamp == x)

            return;



        this._timestamp = x;

        var date = new Date();

        date.setTime(parseFloat(x));

        this.lastModified.textContent = modifiedString(date);

    },



    get left()

    {

        return this.note.style.left;

    },



    set left(x)

    {

        this.note.style.left = x;

    },



    get top()

    {

        return this.note.style.top;

    },



    set top(x)

    {

        this.note.style.top = x;

    },



    get zIndex()

    {

        return this.note.style.zIndex;

    },



    set zIndex(x)

    {

        this.note.style.zIndex = x;

    },



    close: function(event)

    {

        this.cancelPendingSave();



        var note = this;

        db.transaction(function(tx)

        {

            tx.executeSql("DELETE FROM WebKitStickyNotes WHERE id = ?", [note.id]);

        });

        

        var duration = event.shiftKey ? 2 : .25;

        this.note.style.webkitTransition = '-webkit-transform ' + duration + 's ease-in, opacity ' + duration + 's ease-in';

        this.note.offsetTop; // Force style recalc

        this.note.style.webkitTransformOrigin = "0 0";

        this.note.style.webkitTransform = 'skew(30deg, 0deg) scale(0)';

        this.note.style.opacity = '0';



        var self = this;

        setTimeout(function() { document.body.removeChild(self.note) }, duration * 1000);

    },



    saveSoon: function()

    {

        this.cancelPendingSave();

        var self = this;

        this._saveTimer = setTimeout(function() { self.save() }, 200);

    },



    cancelPendingSave: function()

    {

        if (!("_saveTimer" in this))

            return;

        clearTimeout(this._saveTimer);

        delete this._saveTimer;

    },



    save: function()

    {

        this.cancelPendingSave();



        if ("dirty" in this) {

            this.timestamp = new Date().getTime();

            delete this.dirty;

        }



        var note = this;

        db.transaction(function (tx)

        {

            tx.executeSql("UPDATE WebKitStickyNotes SET note = ?, timestamp = ?, left = ?, top = ?, zindex = ? WHERE id = ?", [note.text, note.timestamp, note.left, note.top, note.zIndex, note.id]);

        });

    },



    saveAsNew: function()

    {

        this.timestamp = new Date().getTime();

        

        var note = this;

        db.transaction(function (tx) 

        {

            tx.executeSql("INSERT INTO WebKitStickyNotes (id, note, timestamp, left, top, zindex) VALUES (?, ?, ?, ?, ?, ?)", [note.id, note.text, note.timestamp, note.left, note.top, note.zIndex]);

        }); 

    },



    onMouseDown: function(e)

    {

        captured = this;

        this.startX = e.clientX - this.note.offsetLeft;

        this.startY = e.clientY - this.note.offsetTop;

        this.zIndex = ++highestZ;



        var self = this;

        if (!("mouseMoveHandler" in this)) {

            this.mouseMoveHandler = function(e) { return self.onMouseMove(e) }

            this.mouseUpHandler = function(e) { return self.onMouseUp(e) }

        }



        document.addEventListener('touchmove', this.mouseMoveHandler, true);

        document.addEventListener('touchend', this.mouseUpHandler, true);



        return false;

    },



    onMouseMove: function(e)

    {

        if (this != captured)

            return true;



        this.left = e.clientX - this.startX + 'px';

        this.top = e.clientY - this.startY + 'px';

        return false;

    },



    onMouseUp: function(e)

    {

        document.removeEventListener('touchmove', this.mouseMoveHandler, true);

        document.removeEventListener('touchend', this.mouseUpHandler, true);



        this.save();

        return false;

    },



    onNoteClick: function(e)

    {

        this.editField.focus();

        getSelection().collapseToEnd();

    },



    onKeyUp: function()

    {

        this.dirty = true;

        this.saveSoon();

    },

}



function loaded()

{

    db.transaction(function(tx) {

        tx.executeSql("SELECT COUNT(*) FROM WebkitStickyNotes", [], function(result) {

            loadNotes();

        }, function(tx, error) {

            tx.executeSql("CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp REAL, left TEXT, top TEXT, zindex REAL)", [], function(result) { 

                loadNotes(); 

            });

        });

    });

}



function loadNotes()

{

    db.transaction(function(tx) {

        tx.executeSql("SELECT id, note, timestamp, left, top, zindex FROM WebKitStickyNotes", [], function(tx, result) {

            for (var i = 0; i < result.rows.length; ++i) {

                var row = result.rows.item(i);

                var note = new Note();

                note.id = row['id'];

                note.text = row['note'];

                note.timestamp = row['timestamp'];

                note.left = row['left'];

                note.top = row['top'];

                note.zIndex = row['zindex'];



                if (row['id'] > highestId)

                    highestId = row['id'];

                if (row['zindex'] > highestZ)

                    highestZ = row['zindex'];

            }



            if (!result.rows.length)

                newNote();

        }, function(tx, error) {

            alert('Failed to retrieve notes from database - ' + error.message);

            return;

        });

    });

}



function modifiedString(date)

{

    return 'Last Modified: ' + date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();

}



function newNote()

{

    var note = new Note();

    note.id = ++highestId;

    note.timestamp = new Date().getTime();

    note.left = Math.round(Math.random() * 400) + 'px';

    note.top = Math.round(Math.random() * 500) + 'px';

    note.zIndex = ++highestZ;

    note.saveAsNew();

}



if (db != null)

    addEventListener('load', loaded, false);

</script>

</head>

<body>

<button id="newNoteButton" onclick="newNote()">New Note</button>

	<script>

		document.getElementById("newNoteButton").disabled = !db;

	</script>

</body>

</html>

sharpmanmbw 2012-03-07

打赏
举报

[Quote=引用 5 楼 net_lover 的回复:]
看文档介绍，使用
CACHE MANIFEST
就可以缓存文件啊
http://www.w3.org/TR/html5/offline.html

另外，你还可以使用Html5的localStorage
[/Quote]

我知道可以缓存，但是文档上面只说了在离线状态下可以直接使用缓存，在线时又会自动请求浏览器，不知道可不可以让浏览器在线状态下也能读取缓存，而不因为有网络而请求服务器。此外，localstorage这个api是用来存储数据的，以键/值形式存储，类似于cookie,无法存储html,js,css等静态文件。

孟子E章 2012-03-07

打赏
举报

看文档介绍，使用
CACHE MANIFEST
就可以缓存文件啊
http://www.w3.org/TR/html5/offline.html

另外，你还可以使用Html5的localStorage

sharpmanmbw 2012-03-07

打赏
举报

[Quote=引用 9 楼 kmokd 的回复:]
用HTML5，要实现文件缓存在客户端，应使用根节点html元素的manifest属性，该属性引用一个清单文件（使用UTF-8编码的文本），它列出了离线访问所需缓存的文件清单。并且，网页一旦定义html元素的manifest属性，那么该网页也会被缓存。<html manifest="test.manifest">...</html>
注意：对于HTML5，要更新离线存储的文件，必须更新mani……
[/Quote]

控制更新和控制读取应该不是一个概念吧，我看文档上说，这个api让浏览器自动判断是否在线，只要浏览器发现有网络连接，就认为在线，从而访问服务器读取文件。而manifest配置只是控制何时更新缓存文件，但浏览器不一定要读取这个缓存文件，只有在离线时才去读，在线时不管有没有缓存，都访问服务器

kmokd 2012-03-07

打赏
举报

用HTML5，要实现文件缓存在客户端，应使用根节点html元素的manifest属性，该属性引用一个清单文件（使用UTF-8编码的文本），它列出了离线访问所需缓存的文件清单。并且，网页一旦定义html元素的manifest属性，那么该网页也会被缓存。<html manifest="test.manifest">...</html>
注意：对于HTML5，要更新离线存储的文件，必须更新manifest文件，否则，即使存储的文件发生了更改，也不会有任何作用！例如，中间更改了CSS文件而改变内容的呈现，这时，如果不更改manifest文件，那么新的文件根本不会应用到网页，即使不断单击浏览器的刷新按钮也不会有任何效果。这时要使用浏览器的“清除浏览器数据”功能，才可以将manifest文件清除！另外可以使用window.applicationCache对象控制更新（JavaScript）。
所以可以回答：“有办法让浏览器在线时也读取离线缓存的文件，而不访问服务器，……”