制作防灾HTML5表单

这篇文章首次出现在问题225.net杂志 - 世界上最畅销的网页设计师和开发者杂志。

你有多少次在表格中精心输入信息并且 - BAM! - 浏览器崩溃了?我打赌它至少发生了几次。如果有,您必须打开浏览器,再次转到URL并再次输入所有信息 - 希望浏览器在几分钟后不会再次崩溃。

填写在线表格时,每天都会出现各种各样的事情。浏览器可能会崩溃,您的互联网连接可能会在错误的时刻(特别是在拨号或片状Wi-Fi上),或者您甚至可能会意外地关闭页面(我有时会对自己感到内疚)。

网络建设者应该寻找方法来缓解心怀不满的用户在这种情况下的痛苦,并使他们的体验尽可能轻松。一个很棒(也很简单)的方法是确保用户花费时间和精力在应用程序中输入的内容都保存在本地。

这样,即使浏览器崩溃或标签被意外关闭,当用户稍后再次访问该页面时,信息仍然存在。

人们可以使用许多技术来离线存储数据。直到最近,人们过去常常使用cookies。但是,使用cookie存在某些问题。它们通常只允许存储几KB的数据。没有任何编程API可以访问它们。总的来说,使用它们有点痛苦。

因此,在本教程中,我们将使用Web Storage API,更具体地说是localStorage,在客户端存储数据。

什么是localStorage?

W3C Web Storage API定义了一种在客户端以键值对方式存储数据的新方法。

API定义了两个存储机制,localStorage和sessionStorage。后者处理仅在一个特定会话中在客户端存储数据。一旦关闭选项卡或窗口,信息就会消失。

但是,我们更感兴趣的是以持久的方式存储信息。这就是localStorage的用武之地。

由于localStorage是持久的,即使用户关闭了选项卡或窗口,也可以使用存储的数据。

这意味着用户下次加载Web应用程序时,该信息仍可用于该应用程序。

The W3C Web Storage API defines a new way to store data on the client side in key-value pairs

W3C Web Storage API定义了一种在客户端以键值对方式存储数据的新方法

Web存储(包括localStorage和sessionStorage)具有存储配额。默认情况下,大多数浏览器提供每个源5MB的配额。这可以进一步扩展,但仅限于超出此限制。然后浏览器会询问用户是否要将限制增加到5MB以上。但是,您没有任何有关分配给您的配额剩余空间的信息。

另外需要注意的是localStorage和sessionStorage要求将数据存储为字符串。因此,如果要存储对象,则必须使用调用的对象JSON.stringify()存储它,和JSON.parse()来检索后将其转换回对象。

浏览器支持

大多数浏览器的最新版本都内置了ECMAScript 5支持,因此您可以本机使用这些功能。否则你总是可以包括Json2.js文件(可从Json.org)为这些职能提供支持。

对于网络存储有大量的跨浏览器支持,IE8 +,Safari 4 +,Opera 10.50 +,Firefox 3.5+和Chrome 4+都支持它。这意味着所有现代浏览器都有强大的支持

甚至智能手机浏览器,如Opera Mobile,Mobile Safari和原生Android浏览器也支持Web存储。

如何使用它

使用localStorage非常简单。对于存储键值对,您有一个名为的函数SetItem()并且为了检索特定键的值,你有一个的getItem()功能。

以下代码存储该值'约翰'在关键'名称'

localStorage.setItem('name')='john';

下一个片段分配了该值'名称'钥匙(即'约翰')变量'fname'。

var fname = localStorage.getItem('name'); //将'John'分配给变量fname

此代码段将从localStorage中删除密钥:

LocalStorage.removeItem( '姓名');

要清除钥匙,你有一个Clear()函数LocalStorage.clear()将清除您的应用程序的所有本地存储条目。

我们的联系表格

因此,让我们为网站制作一个快速联系表格。

我个人认为,网络上的表格应该简短而重要。我们的样品联系表也是如此。

在本地保存数据

现在我们已经创建了表单,我们希望保存用户输入的任何内容。

在这种形式中,我们不希望在本地保存密码,因此我们将忽略这些字段。

function savedata(){var uname = document.querySelector(“#name”)。value; var email = document.querySelector(“#email”)。value; var comment = document.querySelector(“#comment”)。value; localStorage.setItem('name',uname); localStorage.setItem('email',email); localStorage.setItem('comment',comment)}

我正在使用Document.querySelector()这里因为它在现代浏览器上更具可读性和支持性。

但是,如果您愿意,可以随时使用的document.getElementById。我们在这里做的是获取在各种表单字段中输入的内容,然后在localStorage的帮助下SetItem()函数,将其作为键值对在本地存储。

现在我们有了一个在本地保存数据的功能,我们可以定期运行这个功能,这样它就可以定期在本地机器上保存数据。

var myInterval = setInterval(savedata,5000); //每5秒在本地保存一次数据

在这种情况下,我们确保页面每五秒在本地保存用户的数据。

With our form, whatever happens you won’t have to retype your information, because it’s safely stored offline

使用我们的表单,无论发生什么,您都不必重新键入您的信息,因为它可以安全地离线存储

检索数据并重新填充表单

好的。表单现在可以在定期的时间间隔后在本地保存数据。现在要确保如果页面意外关闭,则本地存储的数据会在用户下次打开同一页面时重新填充表单。

function retrieveata(){var uname = localStorage.getItem(“name”); var email = localStorage.getItem(“email”); var comment = localStorage.getItem(“comment”); document.querySelector(“#name”)。value = uname; document.querySelector(“#email”)。value = email; document.querySelector(“#comment”)。 value = comment;}

我们跑Retrievedata()每当页面加载。这意味着无论何时加载页面,它都将首先检查localStorage中是否存在表单条目中存储的任何值。如果是,则将在那里加载任何输入的数据。否则,表格将正常显示,没有填写任何内容。

打扫干净

大。用户已成功使用该表单向您发送信息。但是,现在如果他们再次进入表单,他们会看到他们上次输入的内容,即使已成功提交。

我们真正想要的是保存用户本地输入的页面,直到用户提交表单为止。一旦用户成功提交表单,表单应再次清除。

为此,我们来看看Process.php