Question

我有一个简单的PHP表单，带有单选按钮输入。我已经包含了一个脚本来记住使用localStorage的选择，以及一个带有按钮的脚本来清除收音机选择。我还有一个脚本，用于检查以确认浏览器上是否有localStorage可用。在我的完整PHP页面上，我有其他功能和流程。我只包括有问题的部分。

表单在桌面上完美地跨浏览器工作 - 按钮值在重新发布时保留选中的值。即使在您稍后关闭并重新打开浏览器之后，它将在下次转到表单时保留该浏览器中的值 - 也就是说，直到您通过单击＆＃34;重置表单＆清除localStorage单选按钮值。＃34;按钮。

但是，这不适用于IOS（iPhone 5s） - 即使浏览器（Safari）上有localStorage，也不会保留按钮选项。

这是代码 - 我将vanilla html保持在最低限度（为简单起见）：

radio.php：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-3.3.1.min.js"></script>
<title>Test Form for Sticky Mobile Radios</title>
</head>
<body>
<h2>Test Form for Sticky Mobile Radios</h2><br />
<form name="radio-test" action="" method="post"><br />
<input id="radio1" type="radio" name="radio"><label for="radio1" class="radio">Radio 1</label>
<input id="radio2" type="radio" name="radio"><label for="radio2" class="radio">Radio 2</label>
<input id="radio3" type="radio" name="radio"><label for="radio3" class="radio">Radio 3</label><br />
<input id="radio4" type="radio" name="radio2"><label for="radio4" class="radio">Radio 4</label>
<input id="radio5" type="radio" name="radio2"><label for="radio5" class="radio">Radio 5</label>
<input id="radio6" type="radio" name="radio2"><label for="radio6" class="radio">Radio 6</label><br />
<input id="radio7" type="radio" name="radio3"><label for="radio7" class="radio">Radio 7</label>
<input id="radio8" type="radio" name="radio3"><label for="radio8" class="radio">Radio 8</label>
<input id="radio9" type="radio" name="radio3"><label for="radio9" class="radio">Radio 9</label><br />
<input name="radio_test" type="submit" />
<br />

<button id="myBtn" name="myName" onclick="reloadpage();">Reset Form</button><br />
<div id="status">Local Storage is </div>

<script>
// Test if localStorage is available
function lsTest(){ 
    var test = 'test';
    try {
      localStorage.setItem(test, test);
      localStorage.removeItem(test);
      return true;
    } catch(e) {
      return false;
    }
}

var elem = document.getElementById('status');

if(lsTest() === true){
    elem.innerHTML += 'available.';
}else{
    elem.innerHTML += 'unavailable.';   
}

// This will use localstorage to retain radios checked:
$(function()
{
    $('input[type=radio]').each(function()
    {
        var state = JSON.parse( localStorage.getItem('radio_'  + this.id) );

        if (state) this.checked = state.checked;
    });
});

$(window).bind('unload', function()
{
    $('input[type=radio]').each(function()
    {
        localStorage.setItem(
            'radio_' + this.id, JSON.stringify({checked: this.checked})
        );
    });
});

// This will uncheck radios
function reloadpage(){
    var x = document.getElementById("myBtn").name;
    $(function uncheckradios()
{
    $('input[type=radio]').each(function()
    {
        var state = JSON.parse( localStorage.getItem('radio_'  + this.id) );

        if (state) this.checked = state.checked;
    });
});

$(window).bind('unload', function()
{
    $('input[type=radio]').each(function()
    {
        localStorage.setItem(
            'radio_' + this.id, JSON.stringify({checked: this.unchecked})
        );
   });
});
    location.href = location.href;
}
</script>

</body>
</html>

我测试了iphone并确认它确实有localStorage，但脚本没有保留无线电值。任何人都可以提供帮助 - 我尝试了很多没有解决方案的东西我的最后一次尝试是添加安全策略元标记（我知道它很长...）：

<meta http-equiv="Content-Security-Policy" content="img-src * 'self' data:; default-src * 'self' gap: ; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; ">

仍然没有成功......在桌面和平板电脑上它很好，但在iPhone上却没有保留价值。

其他人可能有类似的问题 - 有人可以帮忙吗？

感谢您的考虑和建议！

简单的无线电形式利用localStorage不在移动设备上工作

0 个答案: