Question

嘿伙计们，我现在正在建立一个分机，现在我被困在谷歌选项页面上。我创建了一个HTML表单，options.js，manifest.json和options.html。我得到的问题是将数据保存到本地存储。我收到以下错误：

未捕获RangeError：超出最大调用堆栈大小。

我很感激帮助:) 也有人可以指向我的教程，该教程展示了如何访问页面的特定元素或如何触发＆amp;多次执行网页事件。感谢和GT;我的代码如下：

选项HTML-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>User Details Page</title>
</head>
<body>
<div>
    <h1>Welcome to Project Hercules</h1>
</div>

<div>
    <h4>Below is a form, please enter in all the relevant details</h4>
</div>
<div id="status"></div>
<div>
    <form>
        <fieldset>
            <h1>THE FORM</h1>
            <legend>Personal Details</legend>
            First Name:<br>
            <input type="text" name="firstName">
            <br>
            Surname:<br>
            <input type="text" name="surName">
            <br>
            1st Line of Address:<br>
            <input type="text" name="address1">
            <br>
            City:<br>
            <input type="text" name="city">
            <br>
            PostCode:<br>
            <input type="text" name="postCode">
            <br>
            Email:<br>
            <input type="email" name="userEmail">
            <br>
            Mobile Number:<br>
            <input type="tel" name="userMOB">
            <br>
        </fieldset>
        <br>
        <fieldset>
            <h2>PayPal</h2>
            <br>
            <legend>PayPal Email & Password</legend>
            Email:<br>
            <input type="email" name="payEmail">
            <br>
            Password:<br>
            <input type="password" name="payPass">
            <br>
            <button id="save">Save</button>
            <br>
            <button id="wipe">Wipe</button>
            <br>

        </fieldset>



    </form>
</div>

<script src="options.js"></script>
</body>
</html>

Options.js

function save_options(){
    //this extracts data from the document(optionsPage) and sets them as variables
    var firstName = document.getElementsByName('firstName').value;
    var surName = document.getElementsByName('surName').value;
    var addressF = document.getElementsByName('address1').value;
    var userCity = document.getElementsByName('city').value;
    var postCode1 = document.getElementsByName('postCode').value;
    var email1 = document.getElementsByName('userEmail').value;
    var mobile = document.getElementsByName('userMOB').value;
    var payPEmail = document.getElementsByName('payEmail').value;
    var payPassword = document.getElementsByName('payPass').value;

//sets variables within the object using variables defined in the function
    chrome.storage.local.set({
        savedFirstName: firstName,
        savedSurName: surName,
        savedAddress: addressF,
        savedCity: userCity,
        savedPostCode: postCode1,
        savedEmail: email1,
        savedMobile: mobile,
        savedPaypal: payPEmail,
        savedPayPass: payPassword

    }, function update(){
        //updates the user that their details have been saved
        var status = document.getElementById('status');
        status.textContent = 'Options saved.';
        setTimeout(function(){
            status.textContent='';

        }, 750);
    });
    console.log(save_options());
}
//Restores the form to what it once was
//stored in chrome.storage
function restore_options(){
    chrome.storage.local.get({
        savedFirstName: '',
        savedSurName: '',
        savedAddress: '',
        savedCity: '',
        savedPostCode: '',
        savedEmail: '',
        savedMobile: '',
        savedPaypal: '',
        savedPayPass: ''
},
    function(items){
        document.getElementsByName('firstName').value = items.savedFirstName;
        document.getElementsByName('surName').value = items.savedSurName;
        document.getElementsByName('address1').value = items.savedAddress;
        document.getElementsByName('city').value = items.savedCity;
        document.getElementsByName('postCode').value = items.savedPostCode;
        document.getElementsByName('userEmail').value = items.savedEmail;
        document.getElementsByName('userMOB').value = items.savedMobile;
        document.getElementsByName('payEmail').value = items.savedPaypal;
        document.getElementsByName('payPass').value = items.savedPayPass;

    });

}
document.addEventListener('DOMContentLoaded', restore_options());
document.getElementById('save').addEventListener('click',save_options());

的manifest.json

"manifest_version": 2,
  "name": "Project Hercules",
  "description": " ",
  "version": "0.894",
  "permissions":[
    "storage"
  ],
  "browser_action": {
    "default_icon": "Icon 5.png"

    },
  "options_ui": {
    "page": "optionsPage.html",
    "chrome_style": true
  }

}

Answer 1

我认为您的问题是您正在尝试将对象传递给存储方法。您需要对对象进行字符串化然后设置它，否则您将获得范围错误。

我为您提供了一个工作示例：https://jsfiddle.net/joes4gfe/9/

我不得不使用localStorage而不是chrome.storage，但我相信它会起作用，因为我在开始时遇到同样的错误。

该代码显示了如何使用JSON.stringify来解决错误：

localStorage.setItem('storedValues', JSON.stringify({
  savedFirstName: firstName,
  savedSurName: surName,
  savedAddress: addressF,
  savedCity: userCity,
  savedPostCode: postCode1,
  savedEmail: email1,
  savedMobile: mobile,
  savedPaypal: payPEmail,
  savedPayPass: payPassword
}));

我对您的代码做了很多修改，因此请务必查看示例。

Google期权页面未保存 - Javascript

1 个答案: