Jquery - 页面刷新后无法保留 <selected> 和 <input> 最新值

Posted 2023-04-01

【中文标题】Jquery - 页面刷新后无法保留 <selected> 和 <input> 最新值

【英文标题】：Jquery - Unable to retain <selected> & <input> latest values after page refresh

【发布时间】：2014-12-02 03:55:13

【问题描述】：

我正在尝试做一些非常基本的事情，但事实证明它比我预期的要难。长话短说，我正在使用 ajax 在产品页面之间加载内容。偶尔，用户可能会刷新页面（加载原始页面），然后重新填充产品部分下方的购物车部分。

我在页面（和重新加载）之间传递他们的购物车项目，作为写入本地存储然后从那里检索的值表。这一切都很好，除了...：

问题：'input' 和 'selected' 元素没有保留它们的选定值，而是恢复为默认选择。我已将此与浏览器行为隔离开来，因为 FireFox 实际上会在重新加载时保留所选值（除非您反复重新加载）。 Chrome 和 IE 将在重新加载时重置为默认值（如写入的 select="selected" 或与源 html 中的“输入”关联的值）。

如何在“输入”和“选定”元素的值发生变化时强制对其进行即时属性重写？像这个例子：

          <select name="Size" class="os0" onchange="calculateTotal()">
            <option value="20" selected="selected">20cm sq</option>
            <option value="30">30cm sq</option>
            <option value="45">45cm sq</option>
            <option value="60">60cm sq</option>
          </select>

现在，当用户将报价表中的尺寸更新为 60 平方厘米时，它应该删除 selected="selected" 属性并将其实际重写为 option value="60" - 它必须是对html 本身，否则它不会在刷新后存活。

我希望这很清楚，如果有人需要更多信息，可以详细说明。

【参考方案1】：

有几种方法可以实现这一目标

使用$_COOKIE 在客户端保存临时数据，然后在每次刷新或重新加载页面时检索此cookie。不利的一面是客户端，数据可能被用户篡改/删除，这可能再次导致同样的问题。查看饼干here 使用类似于cookies的localStorage，因为它也在客户端。查看 localStorage here 使用$_SESSION，它比localStorage 和cookies 更安全，因为它是服务器端的，不能被篡改。但是，如果同时对您的网站进行多次点击，则再次将过多数据保存到会话中可能会导致以后出现问题。

对于localStorage，您可以使用 jquery 或 javascript 轻松检查选择。对于输入字段，请执行以下操作

if(localStorage.getItem("itemname") !== null) 
// denotes the value exists
$('inputName').val('localStorage item')

类似的选择：

var text = localStorage.getItem("itemname");
if(text !== null) 
$("select option").filter(function() 
    return this.text == text;
).attr('selected', true);

【讨论】：

感谢您的信息，我知道所有三种方法，并选择 localStorage 是因为它易于实施。我只需要知道当用户更改现有选项/值时如何强制“选择”和“输入”元素更新其 selection="selected" 和值。显然浏览器默认不会这样做，因为刷新任何此类元素都会恢复到原来的默认选择/值。

这段代码至少为我指明了一个新方向，并且我得到了它的工作！谢谢！