• 全部
  • 问答

关于html5的问题,高分求教!!!!

sharpmanmbw 2012-03-06 06:11:32
html5有一个离线缓存api,这个api是为了方便用户在离线时也能浏览网页,但不知当浏览器在线时,是否一定从服务器下载(哪怕已经将文件离线缓存),有没有办法让浏览器在线时也读取离线缓存的文件,而不访问服务器,实现类似于http缓存的功能(这样一来就可以在手机浏览器上缓存html,js,css等不变的文件,减少手机浏览器的流量负担)。
...全文
163 点赞 收藏 17
写回复
17 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
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)。
所以可以回答:“有办法让浏览器在线时也读取离线缓存的文件,而不访问服务器,……”
回复
Peggy 2012-03-07
应该是6楼的答案吧?
回复
孟子E章 2012-03-07
html,js,css的内容就是字符串啊,也可以存啊
回复
sharpmanmbw 2012-03-06
[Quote=引用 2 楼 net_lover 的回复:]
html,js,css等不变的文件浏览器自动缓存的,无需独立设置
[/Quote]
你说的是http缓存吧,就是因为普通的缓存在很多手机浏览器上不能用,我才考虑html5离线缓存的,主要是在手机网页开发上使用
回复
wzb56 2012-03-06
回复
孟子E章 2012-03-06
html,js,css等不变的文件浏览器自动缓存的,无需独立设置
回复
Acesidonu 2012-03-06
还没弄过html5
回复
相关推荐
发帖
CSS
创建于2007-09-28

6.0w+

社区成员

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
申请成为版主
帖子事件
创建了帖子
2012-03-06 06:11
社区公告
暂无公告