简体   繁体   English

Chrome本地存储问题

[英]Chrome local storage problems

I'm trying to make default pop of chrome extension act as a settings page 我正在尝试将chrome扩展程序的默认弹出窗口用作设置页面

Code so far 到目前为止的代码

[Manifest.json] [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] [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>

[options.js] [options.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();

}

The idea is for default popup to work as a settings page it goes without saying that it should show the current set values and you should be able to change them. 这个想法是让默认弹出窗口作为设置页面起作用,不用说它应该显示当前设置值,并且您应该能够更改它们。 Bare in mind I am new to this and this is just a jumble of code from variaty of projects any pointers would be appreciated. 简而言之,我对此并不陌生,这只是各种项目中混杂的代码,任何指针都将不胜感激。

The question is why is it not working, it doesnt save values and neither does it show default values when you open the pop up 问题是为什么它不起作用,它不保存值,并且当您打开弹出窗口时也不显示默认值

You have to store like 你必须像

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM