我们平时开发网页时，经常会使用数据库来存储用户输入的信息。 而且数据库的安装和配置都比较复杂，不太适合一些简单的需求。 下面小编就和大家分享一下如何用HTML5快速存储信息。
崇高的文字
01.首先打开SublimeText软件。 在HTML界面中，我们使用HTML5语言布局了一些输入框html5本地存储，供用户输入信息html5本地存储，如右图所示
02、然后我们正在编写搜索用户输入信息的界面，如右图，只需要1个输入框和1个按钮
03.然后我们在script标签中获取用户输入的信息，但是通过localStorage对象存储到本地，如右图
04.信息搜索功能整理如下。 这里主要是通过localStorage的getItem方法获取信息，如右图
05.然后我们将HTML5中存储的所有信息以列表的形式展示出来，如右图
06.收到后，我们运行页面程序，在输入框中输入你要添加的数据，这里简单输入一些测试数据，然后点击新建记录按钮，如右图
07. 当我们添加一条新记录时，我们会在列表中看到我们减少的信息。 以通配符对的形式存储，如右图
08.最后在搜索输入框上，我们输入key就会得到对应的值，如右图
文章主要介绍H5离线存储Manifest的原理和使用。 文章中详细介绍了示例代码。 有需要的同学就跟着小编一起学习吧。
理解：
离线存储可以将站点的文件存储在本地，在没有网络的情况下仍然可以访问相应站点的存储页面。 这些文件可以包括html、js、css、img等文件。 但即使有网络，浏览器也会优先使用已经离线存储的文件。
什么是清单：
Manifest是一个简单的文本文件html5本地存储，扩展名任意，定义了需要缓存的文件和资源。 第一次打开时，浏览器会手动缓存相应的资源。
显性特征：
清单用途：
创建一个与html同名的manifest文件，例如页面是index.html，那么就可以创建一个index.manifest文件，然后在index.html的html标签中添加以下属性：
或者
Manifest的引入可以是绝对路径，也可以是相对路径。 如果使用绝对路径，则清单文件必须与站点位于同一域名下。
您可以使用任何扩展名保存清单文件，但mine-type必须是text/cache-manifest。
或者
在服务器上部署时，需要在服务器上添加对应的mie-type。
清单标记应包含需要缓存资源的页面。 第一次打开页面时，浏览器会解析页面中的清单并缓存上面列出的资源。 同时，该页面也会被浏览器手动缓存，即使该页面没有列在Manifest中。
清单文件结构：
Manifest 文件，基本格式为三部分：CACHE、NETWORK 和 FALLBACK，其中 NETWORK 和 FALLBACK 是可选的。
CACHE MANIFEST第一行是固定格式，必须稍后写入。
#号开头的注释可以是版本号、时间戳等。一般这里写一个版本号是为了改变缓存文件更新时manifest的作用：浏览器已经缓存的缓存会更新本地缓存仅当清单文件更改时，即使您的代码发生变化
更新，本地浏览器不知道，所以每次发布代码的时候，可以修改#后面的信息，比如版本号或者时间，告诉浏览器相应更新本地缓存。
CACHE MANIFEST
#v0.1
CACHE:
js/index.js
css/index.css
NETWORK:
images/logo.png
FALLBACK:
*.html /404.html /* / /404.html 或 /html/ /404.html 也可*/
1. 第一行是CACHE MANIFEST，这是必需的。
2. CACHE（必填） 标识哪些文件需要缓存，可以是相对路径，也可以是绝对路径。 此处列出的文件将在首次加载时由浏览器本地缓存。
3.NETWORk 这部分是绕过缓存直接读取的文件，可以使用转义，大多数网站都使用*. 使用时显示除了CACHE指定的文件外html5本地存储，其他页面都需要通过Internet访问。
4. FALLBACK（可选） 当资源难以访问时，浏览器会使用备份资源来代替。 第二个表示后备页面。 两个 URI 必须使用相对路径，但与清单文件具有相同的来源。 可以使用转义。
以下示例中，如果网络连接无法完善，则使用“404.html”替换/html5/目录下的所有文件。
倒退：
/html5/ /404.html
在下面的示例中，当任何页面难以访问时，重定向到“404.html”页面。
倒退：
*.html/404.html
注意： 1 必须在第一行 2、3、4 直接顺序是随机的，并且可以在同一个清单文件中出现多次，多次与一次效果相同。
添加了manifest属性的页面会被浏览器手动缓存，不需要在CACHE节点中再次添加。
如何更新缓存
在清单中添加或删除文件可以更新缓存。 如果我们修改js而不进行增删改查，则可以利用上例中注释中的版本号来更新manifest文件。
HTML5引入了js操作离线缓存的方式，下面的js可以自动更新本地缓存。
window.applicationCache.update();
如果用户清除浏览器缓存（手动或使用其他工具），文件将被重新下载。
我们可以使用代码来自动更新清单缓存。 一旦webapp源码更新，本地manifest缓存就会手动更新，以便用户始终可以访问到最新的源码。
至此，这篇关于H5离线存储Manifest的原理和使用的文章就介绍到这里了。 更多关于H5离线存储Manifest的信息，请搜索之前的文章或者继续浏览下面的相关文章。
发表评论