javascript - Chrome本地存储问题

标签 javascript jquery google-chrome storage

我正在尝试让 chrome 扩展程序的默认弹出窗口充当设置页面

到目前为止的代码

[Manifest.json]

{

    "name" : "test",

    "description" : "it just works",

    "version" : "1.0",

    "manifest_version" : 2,

    "permissions": [
        "activeTab",
        "declarativeContent",
        "storage"
    ],

    "icons": {
        "16"  : "icon_016.png"
    },

    "options_page": "options.html",

    "content_scripts": [
        {
            "matches": [""],
            "js": ["jquery.js", "script.js"]
        }
    ],

    "background": {
        "scripts": ["background.js","options.js"],
        "persistent": false
    },



    "browser_action":{

        "default_icon": "icon_016.png",
        "default_popup": "popup.html"
    }
}

[popup.html]

    <!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <base target="_blank" />
    <script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='jquery-ui.min.js'></script>
<script src='spectrum.js'></script>

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel='stylesheet' href='spectrum.css' />

    <script type="text/javascript" src="options.js"></script>
    <style type='text/css'>

        body {
            width: 300px;
            height: 50px;
        }

        .bc {
            text-align: center;
            height: 60px;
        }

    </style>

</head>
<body onload="loadOptions()">
    <div class="bc container well">

                                <div class="input-group-addon">Refresh time (s)</div>
                                <input class="input" type="number" id="refresh">
                                    <br /><br />
                                <div class="input-group-addon">Max Buy</div>
                                <input class="input" type="number" id="maxBuy">
                                    <br /><br />
                                <div class="input-group-addon">Min Buy</div>
                                <input class="input" type="number" id="minBuy">
                                    <br /><br />
                                <div class="input-group-addon">Buy at (%) discount</div>
                                <input class="input" type="number" id="discount">
                                    <br /><br />

                                <button onclick="saveOptions()">Save</button>
                                    <br />

                                <button onclick="eraseOptions()">Restore default</button>
    </div>
</body>
</html>

[选项.js]

var defmax = 999999;
var defmin = 0;
var defdisc = 30;
var defref = 10;



function loadOptions() {

   var maxBuy = localStorage["maxBuy"];
   var minBuy = localStorage["minBuy"];
   var discount = localStorage["discount"];
   var refresh = localStorage["refresh"];


    // value is not void/null

    if (maxBuy == undefined) {

        maxBuy = defmax;

    }

    if (minBuy == undefined) {

        minBuy = defmin;

    }

    if (discount == undefined) {

        discount = defdisc;

    }

    if (refresh == undefined) {

        refresh = defref;

    }

}


function saveOptions() {

   var select1 = document.getElementById("maxBuy").value;
   var select2 = document.getElementById("minBuy").value;
   var select3 = document.getElementById("discount").value;
   var select4 = document.getElementById("refresh").value;

    localStorage["maxBuy"] = select1;
    localStorage["minBuy"] = select2;
    localStorage["discount"] = select3;
    localStorage["refresh"] = select4;

     chrome.storage.sync.set({
           maxBuy: $('#maxBuy').val(),
           minBuy: $('#minBuy').val(),
           discount: $('#discount').val(),
           refresh: $('#refresh').val()
        });
}



function eraseOptions() {

    localStorage.removeItem("maxBuy");
    localStorage.removeItem("minBuy");
    localStorage.removeItem("discount");
    localStorage.removeItem("refresh");

    location.reload();

}

这个想法是让默认弹出窗口充当设置页面,不言而喻,它应该显示当前的设置值,并且您应该能够更改它们。请记住,我对此很陌生,这只是来自各种项目的一堆代码,任何指针都会受到赞赏。

问题是为什么它不起作用,它不保存值,并且当您打开弹出窗口时也不显示默认值

最佳答案

你必须像这样存储

localStorage.setItem("lastname", "Arun");
localStorage.getItem("lastname");

关于javascript - Chrome本地存储问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32991498/

相关文章:

jquery - 如果不在页面顶部,请使用 jQuery 更改 CSS

ios - 从 Chrome 打开 iTunes 的链接

selenium - 网络驱动程序异常 : target frame detached while interacting with elements within iframe using ChromeDriver Chrome and Selenium

javascript - html2pdf 错误的页面大小和缺少 css

javascript - 为什么 "new Date().toString()"在给定 Javascript 运算符优先级的情况下可以工作?

javascript - jQuery 根据内部元素值按字母和数字顺序对无序列表进行排序

javascript - 防止在内联编辑模式下编辑特定可编辑行的单元格

javascript - jQuery 相当于 Ajax 请求中 javascript 的 Transport.responseText 吗?

javascript - 如何在不更改像素值的情况下调整 Phaser 的 Canvas 大小?

javascript - 使用 HTML5 媒体捕获的 IOS Chrome 浏览器中的音频录制问题