Q:

Chrome local storage problems

I'm trying to make default pop of chrome extension act as a settings page
Code so far
[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>

[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

A:

You have to store like
localStorage.setItem("lastname", "Arun");
localStorage.getItem("lastname");

