Javascript 使用本地存储的简单无线电表单不适用于移动设备_Javascript_Forms_Local Storage

Javascript 使用本地存储的简单无线电表单不适用于移动设备

javascript forms

Javascript 使用本地存储的简单无线电表单不适用于移动设备,javascript,forms,local-storage,Javascript,Forms,Local Storage,我有一个带有单选按钮输入的简单PHP表单。我已经包括了一个使用localStorage记住选择的脚本，以及一个带有按钮的脚本来清除单选选择。我还有一个脚本，用于检查浏览器上是否有本地存储。在我的整个PHP页面上，我有其他函数和进程。我只包括有问题的部分表单在桌面上的跨浏览器工作非常完美-按钮值在重新发布时保留选中的值。它将在您下次转到表单时保留该浏览器中的值，即使您稍后关闭并重新打开浏览器后也是如此—也就是说，直到您通过单击“重置表单”按钮清除localStorage单选选择值但是，这在IO

我有一个带有单选按钮输入的简单PHP表单。我已经包括了一个使用localStorage记住选择的脚本，以及一个带有按钮的脚本来清除单选选择。我还有一个脚本，用于检查浏览器上是否有本地存储。在我的整个PHP页面上，我有其他函数和进程。我只包括有问题的部分

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

但是，这在IOS（iPhone 5s）上不起作用-按钮选择不会保留，即使浏览器（Safari）上有本地存储

以下是代码-我将普通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>


粘性移动无线电测试表
粘性移动无线电测试表



第一台
第二台
收音机3

第四台
第五台
收音机6

第七台
第八台
第九台



重置表单

本地存储是
//测试本地存储是否可用
函数lsTest（）{
var测试=‘测试’；
试一试{
setItem（test，test）；
localStorage.removietem（测试）；
返回true；
}捕获（e）{
返回false；
}
}
var elem=document.getElementById（'status'）；
如果（lsTest（）==真）{
elem.innerHTML+=“可用”；
}否则{
elem.innerHTML+=“不可用”；
}
//这将使用localstorage来保持收音机处于选中状态：
$（函数（）
{
$（'input[type=radio]'）。每个（函数（）
{
var state=JSON.parse（localStorage.getItem（'radio_'+this.id））；
如果（state）this.checked=state.checked；
});
});
$（窗口）.bind（'unload'，function（）
{
$（'input[type=radio]'）。每个（函数（）
{
localStorage.setItem(
'radio_'+this.id，JSON.stringify（{checked:this.checked}）
);
});
});
//这将取消选中收音机
函数重载页面（）{
var x=document.getElementById（“myBtn”）.name；
$（函数uncheckradios（）
{
$（'input[type=radio]'）。每个（函数（）
{
var state=JSON.parse（localStorage.getItem（'radio_'+this.id））；
如果（state）this.checked=state.checked；
});
});
$（窗口）.bind（'unload'，function（）
{
$（'input[type=radio]'）。每个（函数（）
{
localStorage.setItem(
'radio_uz'+this.id，JSON.stringify（{checked:this.unchecked}）
);
});
});
location.href=location.href；
}

我测试了iphone，确认它有本地存储，但是脚本没有保留无线电值。有人能帮我吗？我尝试了很多没有解决办法的事情。我最后一次尝试是添加安全策略元标记（我知道这是一个很长的标记…）：

还是没有成功。。。在台式机和平板电脑上都可以，但在iPhone上却没有保留价值

其他人可能也有类似的问题——有人能帮忙吗

谢谢您的考虑和建议

你是在iPhone的匿名模式下测试的吗？不是-iPhone在常规模式下。我在手机上使用了几种浏览器（Chrome、Safari、Firefox）进行了测试，但都没有使用。但是，它可以在桌面和平板电脑上跨浏览器工作。。。谢谢您的提问，我很抱歉没有提前对此进行澄清。Safari处于常规浏览模式（非私人模式）以简化此操作-请参阅此处的演示页面：

<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'; ">