Chrome not setting local storage

I am creating a Chrome packaged app. I want to display a EULA the first time the user opens the app. I want to us Chrome's local storage to test whether or not the app has been opened.

Here is my manifest:

`{
  "name": "Chrome Local Storage App",
  "short_name": "Chrome Local",
  "description": "Test for local storage",
  "version": "0.0.0.3",
  "manifest_version": 2,
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": {"128": "icon-128.png" },
  "permissions": [
   "storage"
]
}`

Here is my javascript:

function disagree(){
    chrome.storage.local.set({eula:'false'}, function(result) {
        console.log(result.eula)});
        // console.log retus undefined
        // Retus: TypeError: Caot read property 'eula' of undefined
    document.getElementById("eulaDisagree").style.display = "block";
}
function agree(){
    chrome.storage.local.set({eula:'true'}, function(result) {
        console.log("Set eula: " + result.eula);
        // console.log retus undefined
        // Retus: TypeError: Caot read property 'eula' of undefined
        chrome.storage.local.get("eula"), function(result){
        console.log("Get Result: " + result.eula)};
        // Retus this error: extensions::uncaught_exception_handler:8 Error in response to 
        // storage.set: Error: Invocation of form get(string) doesn't match definition 
        // get(optional string or array or object keys, function callback)
    });

    document.getElementById("background").style.height = "0%";
    document.getElementById("foreground").style.height = "0%";
    document.getElementById("foreground").style.border = "none";
}

// Creates event listeners
document.addEventListener('DOMContentLoaded', function(){
    document.getElementById("disagree").addEventListener("click", function(){
    disagree();
    }); 
    document.getElementById("agree").addEventListener("click", function(){
    agree();
    });
});

Here is my HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body id="theBody">
<div id="background">
</div>
<div id="foreground">
    <div id="eulaIntro">
        <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at:</p> 
    </div> 
    <div id="eula">
        <h3>End User License Agreement</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>

    </div> 
    <div id="agreeButtons">
        <button id="disagree"    title="I do not Agree">I Do Not Agree</button>
        <button id="agree" title="I agree">I Agree</button>
        <p id="eulaDisagree" class="eulaText" > To use this app you must agree to the End User License Agreement. If you do not agree, uninstall the app.</p>
    </div>              
</div>
<div id="wrapper">
    <div>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
    </div>
    <script type="text/javascript" src="js/script.js" ></script>
</div>
</body>
</html>

Here is my css

html {overflow-y: auto; overflow-y:visible;}
body {padding: 0; text-align: left; width: 60%; margin:50px 20%; font-family: 'Segoe UI', Tahoma, sans-serif;}
p{font-size:20px; line-height:35px; margin-top:0px; margin-bottom: 20px;}
#background{position:fixed; top:0; left: 0; width: 100%; height: 100%; background-color:#000; opacity:.80; z-index:20;}
#foreground{position:fixed;  background-color:#fcfcfc; width: 70%;  height: 80%; border: 1px solid #000; left:15%; top:10%; z-index:20; text-align:left; }
#eulaIntro{margin-left:20px; margin-right:20px; margin-top:20px; height:15%;  overflow-y:auto; font-size:20px;}
#eula{margin:20px 40px; height:50%; overflow-y:auto; font-size:20px;}
#eulaDisagree{text-align:left; margin-left:20px; margin-right:20px; display:none; color:#ff0000; }
#agreeButtons{text-align:center; height:15%;  overflow-y:auto;  }
#wrapper{ margin:0 auto; height:100%;}

The problem is Chrome is not storing the data to local storage. It is not there when I check for it in Dev Tools and the script does not work when I publish the app.

درباره سایت

آخرین مطالب

امکانات وب

Chrome not setting local storage

Vote count: 0

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه