下面的例子展示了在HTML5应用程序中你如何保存数据在客户端本地，使用localStorage属性。
<!DOCTYPE HTML>
<html>
<head>
<title>Using local storage in HTML5</title>
</head>
<body onload="incrementCounter();">
<div id="message"></div>
<button onclick="clearCounter();">Clear localStorage <em>and reload page</em></button>
<button onclick="window.location.reload();">Reload page</button>
<p id="timestamp"></p>
<script type="text/javascript">
function incrementCounter() {
var message;
if (('localStorage' in window) && (window.localStorage !== null)) {
if (!localStorage.counter) {
localStorage.counter = 0;
}
localStorage.counter++;
var suffix = (localStorage.counter == 1) ? "time" : "times";
message = "<h1>You've accessed this page <em>" + localStorage.counter + "</em> " + suffix + "</h1>";
} else {
message = "<p>Your browser does not seem to support <code>localStorage</code>, try using <a href=\"http://www.google.com/chrome\">Google Chrome</a>.</p>";
}
document.getElementById("message").innerHTML = message;
document.getElementById("timestamp").innerHTML = "Last modified: <strong>" + new Date().toLocaleTimeString() + "</strong>";
}
function clearCounter() {
localStorage.clear();
alert("Clearing the local storage");
window.location.reload();
}
</script>
</body>
</html>
源码下载
HTML5使用本地存储using-local-storage-in-html5.zip
分享到：
相关推荐
在这儿需要说明的是：如果你做一个不大不小的微商城项目，那么你可以尝试使用HTML5本地存储过程实现购物车！ 本节和大家探讨下HTML5本地存储实现购物车的功能！ 需要说明的是：上篇转发了别人的博客：HTML5本地存储...
alert('您的浏览器不支持HTML5本地存储功能。'); } ``` ##### 3. 数字键名 尽管可以通过数字设置键名，但实际上这些数字会被转换为字符串。例如： ```javascript localStorage.setItem(1, 'some value'); ``` 这里...
HTML本地存储，特别是HTML5中的localStorage和Web数据库（Database）技术，是现代Web应用中用于在客户端存储数据的重要工具。这些技术使得开发者可以将部分数据存储在用户的浏览器中，从而提高应用程序的性能，减少...
与传统的Cookie存储方式相比，HTML5本地存储提供了更丰富的功能和更大的存储容量。本地存储主要包括两个API：`localStorage` 和 `sessionStorage`。 #### 二、`localStorage` `localStorage` 是HTML5本地存储机制...
在Android上实现本地通讯录访问，需要使用HTML5的Web SQL Database或IndexedDB来存储通讯录数据，同时利用PhoneGap或Cordova这样的框架将JavaScript API与Android原生API桥接。PhoneGap提供了一个名为`contacts`的...
在这个"html5本地存储-公告模块"中，我们显然看到了一个利用HTML5的localStorage或sessionStorage特性来实现的公告展示功能。 公告模块通常用于显示一些重要的、时效性的信息，如公司政策更新、活动通知等。在传统...
HTML5是现代网页开发的重要标准，它引入了许多新特性，其中本地存储技术是提升Web应用离线可用性和性能的关键部分。Web SQL Database是HTML5早期的本地存储解决方案之一，允许Web应用程序在用户的浏览器中存储大量...
1. Web Storage：HTML5的本地存储主要由两部分组成，即`localStorage`和`sessionStorage`。`localStorage`用于持久化存储，数据在浏览器关闭后依然保留；而`sessionStorage`仅在当前会话中有效，关闭标签页或浏览器...
HTML5的本地存储机制扩展了Web应用程序的能力，使得开发者可以在用户浏览器中持久化地存储数据。在HTML5之前，Web应用程序依赖于Cookie来存储少量信息，但Cookie由于大小限制和性能原因并不适合大量数据的存储。...
这些框架的使用极大地简化了HTML5本地存储的开发流程，使得开发者可以专注于业务逻辑，而不用过于关心底层存储的实现细节。例如，通过Lawnchair或Persistence.js，你可以方便地进行数据的增删查改操作，并且可以轻松...
【纯HTML5绘制的本地时钟特效】是一个利用HTML5技术实现的创新视觉效果，它展示了HTML5的强大功能和灵活性。HTML5作为一种先进的标记语言，不仅增强了网页的结构化能力，还提供了丰富的媒体支持和离线存储等功能。在...
HTML5不仅改进了Web页面的表现性能，还增加了本地数据库、本地存储和离线应用等功能。它的新特性使得Web应用能够更好地离线工作，并提供更丰富的媒体支持和图形处理能力。开发者可以利用HTML5开发出跨平台的应用，...
3. **安全性**：考虑到数据安全和隐私，播放网络音乐时需注意防止恶意链接，同时处理好用户权限，如访问本地存储的音乐。 4. **性能优化**：音频处理可能会消耗大量资源，因此需要优化音频加载和解码过程，避免卡顿...
HTML5的离线存储功能是通过一种叫做Web Storage的技术实现的，其中SQLite数据库是其中的一部分，主要用于在用户浏览器中存储大量结构化数据。这个技术在移动应用开发中尤其有用，尤其是当应用程序需要在离线状态下...
在现代Web应用中，本地存储（Local Storage）是JavaScript中一种重要的数据持久化技术，它允许开发者在用户的浏览器上存储键值对数据，即使关闭浏览器后数据仍然保留。本示例将详细介绍如何利用JS和HTML5的...
【Android开发教程之使用HTML5开启移动Web应用程序的本地存储】 HTML5的本地存储功能是其最引人注目的特性之一，它为Web开发者提供了一种有效存储大量数据的方法，从而替代了传统的Cookie存储方式。在移动应用领域...