提交时保留的带有 Javascript 表单数据的客户端 html 页面[关闭]

Posted 2023-02-24

【中文标题】提交时保留的带有 Javascript 表单数据的客户端 html 页面[关闭]

【英文标题】：Client-side html page with Javascript form data that persists when submit [closed]

【发布时间】：2013-08-08 15:33:11

【问题描述】：

是否可以使用一个表单构建一个纯 html 页面（没有 php、没有 asp、没有服务器端），虽然只有 javascript，但在提交时会保留其选中的复选框？

更具体地说，当单击某些复选框时，我需要构建一个实时更新自身的表（就像 excel 对公式计算所做的那样）。 我找不到存储复选框状态的方法，因为在每次页面刷新（表单提交操作）时，javascript 变量都会被重置。

【问题讨论】：

了解 LocalStorage 或 Cookie。

为什么你想要一个不向服务器端函数发布任何信息的表单（例如保存、操作、处理等）？您可能仅通过使用 cookie 或本地存储就可以在客户端制作一些东西，但如果没有在服务器上运行任何东西，它就不会是一个非常健壮的应用程序。这就是网络应用的全部意义所在。

为什么不只是：不刷新页面，使用 AJAX 从服务器发送/接收数据并使用 javascript 应用适当的更改

关于题外话：也许我的问题不够清楚：我不是在寻找代码，而只是在寻找一个“方向”，在接受之前，我需要知道它是否可行还是有限制..无论如何感谢大家的许多回答和建议..非常珍贵！

【参考方案1】：

取自我的回答here

解决方案的假设答案是 localStorage()...

它依赖于 Javascript，绝对不是一个完美的解决方案，但 HTML5 localStorage 允许您将首选项存储在用户的计算机上。

首先，检测对localStorage()的支持：

if (Modernizr.localstorage)  // with Modernizr
if (typeof(localStorage) != 'undefined' )  // Without Modernizr

如果支持就设置一个参数：

localStorage.setItem("somePreference", "Some Value");

然后再检索它，只要您的用户没有清除本地存储：

var somePreference = localStorage.getItem("somePreference");

当你想清除它时，只需使用：

localStorage.removeItem("somePreference");

对于那些使用不受支持（旧版）浏览器的人，您可以使用 [本地存储黑客][2] 滥用 Flash LSO，但这些绝对不是理想的。

会话或 cookie 呢？

这两种都是有意的临时存储形式。即使是 Flash LSO 也比 cookie 更适合长期存储。

【讨论】：

+1，因为您的回答比我的回答更深入地了解本地存储。

【参考方案2】：

使用 JavaScript，您可以只为复选框“检查”事件编写事件处理程序，因此不需要提交表单。

像 Knockout.JS 这样的库允许您根据计算“实时”更新表格等内容，而无需刷新页面。

【参考方案3】：

您有多种选择

HTML5 Local Storage

您在浏览器中本地存储内容。如果用户清除他们的缓存和本地存储，一切都消失了。

JavaScript Cookie

您不能使用会话，因为它们是服务器端的。但是，您可以使用 cookie 来存储/检索数据。见here。

将所有内容破解到 URL 中

您可以使用 HTML5 的 push state event 更改 URL。您可以在需要更改的每个事件上附加参数“GET 请求样式”。

<script type="text/javascript">
    var stateObj =  foo: "bar" ;
    function change_my_url()
    
        history.pushState(stateObj, "page 2", "bar.html");
    
    var link = node.getElementByID('click');
    link.addEventListener('click', change_my_url, false);
</script>

<a href="#" id='click'>Click to change url to bar.html</a>

就我个人而言，我会使用 HTML5 本地存储。但请记住 - 如果用户使用缓存，您不能依赖他们拥有准确的数据。对于关键任务的东西，你真的应该使用服务器端语言（这就是它的用途）。

有用的链接：

HTML Spec - Latest update, Aug '13

【讨论】：

如果 OP 明确声明“无服务器端”，则无需刷新页面或提交任何表单，因此无需将数据存储在当前页面之外，一切都可以存储在 javascript 中变量和 DOM

如果用户不小心刷新了页面，一切都消失了吗？我不这么认为...我提供了多个有效选项。你给了一个 invalid 一个。我们不是在报复这里的投票，这太可悲了。我们应该根据他或她的要求为 OP 提供多种可行的选择。