在Chrome以外的任何浏览器环境中进行localStorage清算时，我遇到了问题。我有一个验证码，使用用户必须绘制的形状来提交表单。用户可以单击reverse以生成新形状。为了保持输入到先前字段的信息，每次请求新形状时，我都将数据存储在localStorage中。但是，如果刷新页面，我希望localStorage完全被删除。
以下是用户点击的print(sorted(name_age, key = lambda i : int(i.split(',')[1]), reverse=True))
代码：
span这是localStorage的JS：
span此代码在Chrome中完美运行，但IE和Firefox中的页面刷新无法清除localStorage。我是否因为localStorage在多个浏览器中清除而做错了什么？
我尝试过使用<span style="color:#0000EE;cursor:pointer;" id="new-shape" onclick="window.location.reload()" title="Click for a new shape">new shape</span>
，并且考虑到$('#new-shape').on('click', function () {
var stickies = $('.sticky');
var dropdowns = $('select');
window.onbeforeunload = function () {
localStorage.setItem("branch", $('#00NL0000003INTJ').val());
localStorage.setItem("department", $('#00NL0000003I0Ux').val());
localStorage.setItem("contact", $('#00NL0000003INUC').val());
localStorage.setItem("company", stickies[0].value);
localStorage.setItem("firstName", stickies[1].value);
localStorage.setItem("lastName", stickies[2].value);
localStorage.setItem("phone", stickies[3].value);
localStorage.setItem("ext", stickies[4].value);
localStorage.setItem("email", stickies[5].value);
localStorage.setItem("help", stickies[6].value);
}
});
window.onload = function () {
var stickies = $('.sticky');
var dropdowns = $('select');
var selects = [localStorage.getItem("branch"), localStorage.getItem("department"), localStorage.getItem("contact")];
var company = localStorage.getItem("company");
var first = localStorage.getItem("firstName");
var last = localStorage.getItem("lastName");
var phone = localStorage.getItem("phone");
var ext = localStorage.getItem("ext");
var email = localStorage.getItem("email");
var help = localStorage.getItem("help");
var stickiesArr = [company, first, last, phone, ext, email, help];
for (var i = 0; i < stickiesArr.length; i++) {
if (stickiesArr[i] != null) {
stickies[i].value = stickiesArr[i];
}
}
for (var i = 0; i < selects.length; i++) {
if (selects[i] != null) {
dropdowns[i].value = selects[i];
}
}
//this allows the wipe out of all data on a page refresh,
//but clicking on "new shape" will maintain the data
localStorage.clear();
}
。
答案 0 :(得分：0)
我设法最终让它发挥作用。部分问题在于：
window.onbeforeunload = function () { (...) }
FireFox和IE11这两个匿名函数调用都遇到了问题。我不得不将on.click事件更改为：
$('#new-shape').on('click', function () {
var stickies = $('.sticky');
localStorage.setItem("branch", $('#00NL0000003INTJ').val());
localStorage.setItem("department", $('#00NL0000003I0Ux').val());
localStorage.setItem("contact", $('#00NL0000003INUC').val());
localStorage.setItem("company", stickies[0].value);
localStorage.setItem("firstName", stickies[1].value);
localStorage.setItem("lastName", stickies[2].value);
localStorage.setItem("phone", stickies[3].value);
localStorage.setItem("ext", stickies[4].value);
localStorage.setItem("email", stickies[5].value);
localStorage.setItem("help", stickies[6].value);
});
我的window.onload匿名函数调用必须稍微重新配置为：
window.onload = function () {
var stickies = $('.sticky');
var dropdowns = $('select');
var selects = [localStorage.getItem("branch"), localStorage.getItem("department"), localStorage.getItem("contact")];
var company = localStorage.getItem("company");
var first = localStorage.getItem("firstName");
var last = localStorage.getItem("lastName");
var phone = localStorage.getItem("phone");
var ext = localStorage.getItem("ext");
var email = localStorage.getItem("email");
var help = localStorage.getItem("help");
var localStorageArr = [company, first, last, phone, ext, email, help];
//input fields sticky
for (var i = 0; i < localStorageArr.length; i++) {
stickies[i].value = localStorageArr[i];
}
//dropdown fields sticky
for (var i = 0; i < selects.length; i++) {
if (selects[i] != null) {
dropdowns[i].value = selects[i];
} else {
dropdowns[i].selectedIndex = 0;
}
}
//fixing textarea
if (help === null) {
stickies[6].value = "";
}
localStorage.clear();
}
一些hacky解决方法，但结果现在正在按预期工作。