一 介绍
HTML5 web存储,一个比cookie更好的本地存储方式。
1、什么是HTML5 Web存储
使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是cookie。
但是Web存储需要更加的安全与快速，这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上，它也可以存储大量的数据，而不影响网站的性能。
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
2、localStorage和sessionStorage
客户端存储数据的两个对象为：
localStorage - 没有时间限制的数据存储，第二天、第二周或下一年之后，数据依然可用。
sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除。
二 代码
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> Storage示例 </title>
</head>
<body>
<h2> Storage示例</h2>
<input type="text" id="input"/>
<!-- 定义是否用Local Storage保存的数据的复选框 -->
使用Local Storage保存：<input type="checkbox" id="local"/>
<div id="show"></div>
<input type="button" value="保存数据"
onclick="saveStorage('input');"/>
<input type="button" value="读取数据"
onclick="loadStorage('show');"/>
<script type="text/javascript">
var saveStorage = function(id)
{
// 如果勾选了复选框，使用Local Storage保存数据
// 否则使用Session Storage保存数据
var checked = document.getElementById("local").checked;
var storage = checked ? localStorage : sessionStorage;
var target = document.getElementById(id);
storage.setItem("message" , target.value);
}
var loadStorage = function(id)
{
// 如果勾选了复选框，使用Local Storage保存数据
// 否则使用Session Storage保存数据
var checked = document.getElementById("local").checked;
var storage = checked ? localStorage : sessionStorage;
var target = document.getElementById(id);
// 读取数据
target.innerHTML = storage.getItem("message");
}
</script>
</body>
</html>
三 运行结果
相关推荐
然而，理解Web SQL的概念对于理解现代Web存储机制仍然很有帮助，尤其是当面临需要支持旧版浏览器的项目时。 在提供的压缩包文件`test`中，可能包含了实现上述操作的示例代码，读者可以查阅以加深理解。通过学习和...
### HTML5离线存储之Web SQL 随着HTML5标准的不断完善和浏览器技术的进步，Web开发领域迎来了诸多新特性，其中Web SQL数据库就是一种用于客户端的数据存储解决方案。虽然WebDatabase规范官方宣布不再进行维护，但其...
HTML5是现代网页开发的重要标准，它引入了许多新特性，其中Web存储和缓存技术是提升Web应用性能和用户体验的关键部分。在这个简单的案例中，我们将深入理解这些技术，并探讨它们如何帮助开发者创建更加高效和响应式...
总结起来，HTML5的Web存储（localStorage和sessionStorage）为开发者提供了强大而灵活的工具，用于在客户端存储和检索数据，极大地提高了Web应用程序的功能性和用户体验。它们解决了cookies的不足，使Web应用能够...
HTML5移动Web开发是当前互联网应用开发的重要领域，随着移动设备的普及，越来越多的开发者将目光转向了构建适应各种屏幕尺寸、操作系统且具有良好用户体验的移动Web应用。本资源提供了“HTML5移动Web开发”指南，...
【Android开发教程之使用HTML5开启移动Web应用程序的本地存储】 HTML5的本地存储功能是其最引人注目的特性之一，它为Web开发者提供了一种有效存储大量数据的方法，从而替代了传统的Cookie存储方式。在移动应用领域...
HTML5（HyperText Markup Language 5）是Web开发的最新标准，它引入了许多新特性，如离线存储、拖放功能、媒体元素、画布、SVG等，极大地增强了Web应用的功能和用户体验。许多H5应用框架，如Angular、React和Vue.js...
相较于以往的HTML版本，HTML5大幅增强了对多媒体内容的支持，引入了本地存储、离线应用、二维图形绘制、视频和音频处理等新特性，使得开发者能够创建更为丰富和互动性更强的web应用。 HTML5的开发和标准化是跨行业...
此外，HTML5提供的Web存储、Web SQL数据库和indexedDB等新技术为Web应用提供了更多的数据存储选择，丰富了Web应用的功能。 HTML5的技术优势还包括了它的语义化标签，这些标签有助于提高页面的可访问性和搜索引擎...
通过学习《HTML5 For Web Designers》，设计师不仅能够掌握HTML5的基本语法，还能了解到如何将这些新特性有效地应用于实际项目中，从而提升网站的设计质量和功能性。 总之，《HTML5 For Web Designers》是一本全面...
基于HTML5 WebSocket、PHP和jQuery的实时Web应用开发，提供了一种高效、实时地交换数据的方式。以下是相关的知识点详解： ### 实时Web应用概念 实时Web应用指的是那些能够实时响应用户行为或数据变化的应用，这类...
HTML5程序设计中的“Web存储”是现代网页开发中一种重要的数据存储技术，它包括了`sessionStorage`和`localStorage`两种方式，旨在解决传统Cookie在本地存储数据时的限制和不足。本单元将深入探讨Web Storage的概念...
HTML5 离线存储技术是现代Web开发中的一个重要特性，它使得网页和应用程序即使在网络不稳定或者无网络连接的情况下也能正常运行。这项技术的核心在于利用HTML5的`Application Cache`（应用缓存）或者称为`Cache ...
HTML5 Web 存储是现代Web开发...总的来说，HTML5 Web存储为Web开发者提供了一种高效、便捷的本地数据管理手段，使得应用程序能够更好地处理离线数据，提升用户体验，同时也为构建更复杂、功能丰富的Web应用奠定了基础。
HTML5的Web留言本是一个利用现代浏览器特性，特别是Web Storage技术来实现在线存储用户数据的应用。这个项目的核心目标是创建一个简单的留言板，用户可以在上面留下信息，且这些信息能够在用户下次访问时仍然存在，...
1. **离线存储**：HTML5的离线存储（如AppCache和Service Worker）使得web应用能够在没有网络连接时仍然能够访问部分数据，提高阅读器的离线阅读体验。 2. **本地存储**：Web Storage（包括localStorage和...
HTML5离线存储是Web应用程序实现离线工作的关键技术，它允许网页在用户离线时仍然可以访问和使用部分数据，极大地提升了用户体验。本课程代码主要围绕这个主题展开，旨在帮助开发者掌握HTML5离线存储的基本原理和...