本地存储多个字段，其中一个字段覆盖第二个字段

Question

我正在创建一个限制电视内容的 Chrome 扩展程序。我有两个将值存储到本地存储的下拉菜单表单。

Javascript（外部文件）：

ratings.js

window.onload=function (){
    document.getElementById('saveRatings').onsubmit=saveRatings;
}

function saveRatings() {
    var selectedRatings = document.forms["ratings_form"]["ratings"].value;

// store selectedRatings to local storage
    localStorage.storedRatings = selectedRatings;

}

age.js

window.onload=function (){
    document.getElementById('saveAge').onsubmit=saveAge;
}

function saveAge() {
    var selectedAge = document.forms["age_form"]["age"].value;

// store selectedAge to local storage
    localStorage.storedAge = selectedAge;

}

HTML

                    <summary>Select Content to Allow</summary><br>
                        <form name = "ratings_form" id="saveRatings">
                        <select name="ratings" multiple="multiple">
                            <option value="G">G only</option>
                            <option value="G/PG">G/PG only</option>
                            <option value="G/PG/PG13">G/PG/PG-13 only</option>
                            <option value="G/PG/PG13/R">G/PG/PG-13/R</option>
                        </select>
                        <div></div>
                        <input type="submit" value="Save">  </form>

                        <summary>Select Age Group to Deter</summary><br>
                        <form name = "age_form" id="saveAge">
                        <select name="age" multiple="multiple">
                            <option value="e">Everyone</option>
                            <option value="ct">Children & Teens;</option>
                            <option value="c">Children</option>
                            <option value="0">Turn off</option>
                        </select>
                        <div></div>
                        <input type="submit" value="Save">
                        </form>

age_form 的键值对存储正确。但是， ratings_form 总是给我未定义的。如果我切换顺序（首先是年龄，然后是评级），那么 ratings_form 的键值对会给我正确的值，而 age_value 会给我未定义的值。似乎第二种形式的值正在覆盖第一种形式的值。如何防止发生这种覆盖。

感谢您的帮助。

Answer 1

当然，您的问题是您正在用最后运行的代码覆盖 window.onload 函数！您只需要在每个函数中添加一个简单的 console.log(); 即可查看第一个函数没有被调用。您可以使用addEventListener() 或使用jQuery 的$(document).ready() 来解决此问题。

window.addEventListener('load', function() {
  console.log('1');
});

window.addEventListener('load', function() {
  console.log('2');
});

请记住onload 是window 的一个属性，其行为与任何变量/属性一样。考虑一下：

var foo = 'bar';
foo = 'baz';
console.log(foo); // displays 'baz', of course! You changed the value!

这正是您使用 onload 函数所做的。你把它改成了别的东西。