Question

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

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

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

如何强制对“输入”进行即时属性重写＆amp; “选定”元素即时价值变化？像这个例子：

          <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”属性并实际将其重写为选项值=“60” - 它必须重写为HTML本身，否则它无法刷新。

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

Answer 1

有几种方法可以实现

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

对于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);
}

Jquery - 无法保留<selected>＆amp; <input />页面刷新后的最新值</selected>

1 个答案: