如题所述
html5 æ¬å°åå¨æäºç§æ¹æ¡ã
1ãLocalStorage
LocalStorageå°±æ¯Key-Valueçç®åé®å¼å¯¹åå¨ç»æï¼Web Storageé¤äºlocalStorageçæä¹ æ§åå¨å¤ï¼è¿æé对æ¬æ¬¡åè¯çsessionStorageæ¹å¼ï¼ä¸è¬æ åµä¸localStorageè¾ä¸ºå¸¸ç¨ï¼ç¤ºä¾ä»£ç å¦ä¸ï¼
function save(dataModel){
var value = dataModel.serialize();
window.localStorage['DataModel'] = value;
window.localStorage['DataCount'] = dataModel.size();
console.log(dataModel.size() + ' datas are saved');
return value;
}
function restore(dataModel){
var value = window.localStorage['DataModel'];
if(value){
dataModel.deserialize(value);
console.log(window.localStorage['DataCount'] + ' datas are restored');
return value;
}
return '';
}
function clear(){
if(window.localStorage['DataModel']){
console.log(window.localStorage['DataCount'] + ' datas are cleared');
delete window.localStorage['DataModel'];
delete window.localStorage['DataCount'];
}
}
2ãCookie
è¿ç§åå¨æ¹å¼åå¨å 容å¾æéï¼åªéååç®åä¿¡æ¯åå¨ï¼ååæ¥å£è®¾è®¡å¾æå ¶å人类ï¼ä¸¾ä¾å¦ä¸ï¼
function getCookieValue(name) {
if (document.cookie.length > 0) {
var start = document.cookie.indexOf(name + "=");
if (start !== -1) {
start = start + name.length + 1;
var end = document.cookie.indexOf(";", start);
if (end === -1){
end = document.cookie.length;
}
return unescape(document.cookie.substring(start, end));
}
}
return '';
}
function save(dataModel) {
var value = dataModel.serialize();
document.cookie = 'DataModel=' + escape(value);
document.cookie = 'DataCount=' + dataModel.size();
console.log(dataModel.size() + ' datas are saved');
return value;
}
3ãIndexed Database API
IndexedDBå¯ä»¥åå¨ç»æ对象ï¼å¯æ建keyåindexçç´¢å¼æ¹å¼æ¥æ¾ï¼ç®ååæµè§å¨çå·²ç»éæ¸æ¯æIndexedDBçåå¨æ¹å¼ï¼å ¶ä½¿ç¨ä»£ç å¦ä¸ï¼é注æIndexedDBçå¾å¤æä½æ¥å£ç±»ä¼¼NodeJSçå¼æ¥åè°æ¹å¼ï¼ç¹å«æ¯æ¥è¯¢æ¶è¿cursorçcontinueé½æ¯å¼æ¥å次åè°onsuccesså½æ°çæä½æ¹å¼ï¼å æ¤åNodeJSä¸æ ·ä½¿ç¨ä¸ä¸å¦åæ¥ç代ç 容æã
function save(dataModel){
var tx = db.transaction("meters", "readwrite");
var store = tx.objectStore("meters");
dataModel.each(function(data){
store.put({
id: data.getId(),
tag: data.getTag(),
name: data.getName(),
meterValue: data.a('meter.value'),
meterAngle: data.a('meter.angle'),
p3: data.p3(),
r3: data.r3(),
s3: data.s3()
});
});
tx.oncomplete = function() {
console.log(dataModel.size() + ' datas are saved');
};
return dataModel.serialize();
}
4ãFileSystem API
FileSystem APIç¸å½äºæä½æ¬å°æ件çåå¨æ¹å¼ï¼ç®åæ¯ææµè§å¨ä¸å¤ï¼å ¶æ¥å£æ åä¹å¨åå±å¶å®ååä¸ï¼å æ¤ä¹å¯ä»¥å¨æçæå¾çå°æ¬å°æ件ï¼ç¶åéè¿ filesystem:http:*** çURLæ¹å¼ç´æ¥èµå¼ç»imgçhtmlå ç´ çsrc访é®ã
function save(dataModel) {
var value = dataModel.serialize();
fs.root.getFile('meters.txt', {create: true}, function (fileEntry) {
console.log(fileEntry.toURL());
fileEntry.createWriter(function (fileWriter) {
fileWriter.onwriteend = function () {
console.log(dataModel.size() + ' datas are saved');
};
var blob = new Blob([value], {type: 'text/plain'});
fileWriter.write(blob);
});
});
return value;
}
5ãApplication Cache
window.applicationCache 对象æ¯å¯¹æµè§å¨çåºç¨ç¼åçç¼ç¨è®¿é®æ¹å¼ãå ¶ status å±æ§å¯ç¨äºæ¥çç¼åçå½åç¶æï¼
var appCache = window.applicationCache;
switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
break;
case appCache.IDLE: // IDLE == 1
return 'IDLE';
break;
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING';
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING';
break;
case appCache.UPDATEREADY: // UPDATEREADY == 4
return 'UPDATEREADY';
break;
case appCache.OBSOLETE: // OBSOLETE == 5
return 'OBSOLETE';
break;
default:
return 'UKNOWN CACHE STATUS';
break;
};
1ãLocalStorage
LocalStorageå°±æ¯Key-Valueçç®åé®å¼å¯¹åå¨ç»æï¼Web Storageé¤äºlocalStorageçæä¹ æ§åå¨å¤ï¼è¿æé对æ¬æ¬¡åè¯çsessionStorageæ¹å¼ï¼ä¸è¬æ åµä¸localStorageè¾ä¸ºå¸¸ç¨ï¼ç¤ºä¾ä»£ç å¦ä¸ï¼
function save(dataModel){
var value = dataModel.serialize();
window.localStorage['DataModel'] = value;
window.localStorage['DataCount'] = dataModel.size();
console.log(dataModel.size() + ' datas are saved');
return value;
}
function restore(dataModel){
var value = window.localStorage['DataModel'];
if(value){
dataModel.deserialize(value);
console.log(window.localStorage['DataCount'] + ' datas are restored');
return value;
}
return '';
}
function clear(){
if(window.localStorage['DataModel']){
console.log(window.localStorage['DataCount'] + ' datas are cleared');
delete window.localStorage['DataModel'];
delete window.localStorage['DataCount'];
}
}
2ãCookie
è¿ç§åå¨æ¹å¼åå¨å 容å¾æéï¼åªéååç®åä¿¡æ¯åå¨ï¼ååæ¥å£è®¾è®¡å¾æå ¶å人类ï¼ä¸¾ä¾å¦ä¸ï¼
function getCookieValue(name) {
if (document.cookie.length > 0) {
var start = document.cookie.indexOf(name + "=");
if (start !== -1) {
start = start + name.length + 1;
var end = document.cookie.indexOf(";", start);
if (end === -1){
end = document.cookie.length;
}
return unescape(document.cookie.substring(start, end));
}
}
return '';
}
function save(dataModel) {
var value = dataModel.serialize();
document.cookie = 'DataModel=' + escape(value);
document.cookie = 'DataCount=' + dataModel.size();
console.log(dataModel.size() + ' datas are saved');
return value;
}
3ãIndexed Database API
IndexedDBå¯ä»¥åå¨ç»æ对象ï¼å¯æ建keyåindexçç´¢å¼æ¹å¼æ¥æ¾ï¼ç®ååæµè§å¨çå·²ç»éæ¸æ¯æIndexedDBçåå¨æ¹å¼ï¼å ¶ä½¿ç¨ä»£ç å¦ä¸ï¼é注æIndexedDBçå¾å¤æä½æ¥å£ç±»ä¼¼NodeJSçå¼æ¥åè°æ¹å¼ï¼ç¹å«æ¯æ¥è¯¢æ¶è¿cursorçcontinueé½æ¯å¼æ¥å次åè°onsuccesså½æ°çæä½æ¹å¼ï¼å æ¤åNodeJSä¸æ ·ä½¿ç¨ä¸ä¸å¦åæ¥ç代ç 容æã
function save(dataModel){
var tx = db.transaction("meters", "readwrite");
var store = tx.objectStore("meters");
dataModel.each(function(data){
store.put({
id: data.getId(),
tag: data.getTag(),
name: data.getName(),
meterValue: data.a('meter.value'),
meterAngle: data.a('meter.angle'),
p3: data.p3(),
r3: data.r3(),
s3: data.s3()
});
});
tx.oncomplete = function() {
console.log(dataModel.size() + ' datas are saved');
};
return dataModel.serialize();
}
4ãFileSystem API
FileSystem APIç¸å½äºæä½æ¬å°æ件çåå¨æ¹å¼ï¼ç®åæ¯ææµè§å¨ä¸å¤ï¼å ¶æ¥å£æ åä¹å¨åå±å¶å®ååä¸ï¼å æ¤ä¹å¯ä»¥å¨æçæå¾çå°æ¬å°æ件ï¼ç¶åéè¿ filesystem:http:*** çURLæ¹å¼ç´æ¥èµå¼ç»imgçhtmlå ç´ çsrc访é®ã
function save(dataModel) {
var value = dataModel.serialize();
fs.root.getFile('meters.txt', {create: true}, function (fileEntry) {
console.log(fileEntry.toURL());
fileEntry.createWriter(function (fileWriter) {
fileWriter.onwriteend = function () {
console.log(dataModel.size() + ' datas are saved');
};
var blob = new Blob([value], {type: 'text/plain'});
fileWriter.write(blob);
});
});
return value;
}
5ãApplication Cache
window.applicationCache 对象æ¯å¯¹æµè§å¨çåºç¨ç¼åçç¼ç¨è®¿é®æ¹å¼ãå ¶ status å±æ§å¯ç¨äºæ¥çç¼åçå½åç¶æï¼
var appCache = window.applicationCache;
switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
break;
case appCache.IDLE: // IDLE == 1
return 'IDLE';
break;
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING';
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING';
break;
case appCache.UPDATEREADY: // UPDATEREADY == 4
return 'UPDATEREADY';
break;
case appCache.OBSOLETE: // OBSOLETE == 5
return 'OBSOLETE';
break;
default:
return 'UKNOWN CACHE STATUS';
break;
};
温馨提示:答案为网友推荐,仅供参考
第1个回答 2015-05-17
摘自w3school
HTML5 提供了两种在客户端存储数据的新方法:
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
localStorage 方法
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
<script type="text/javascript">localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
sessionStorage 方法
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
<script type="text/javascript">sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>本回答被提问者和网友采纳