Chrome未设置本地存储

Question

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 javascript:

function disagree(){
    chrome.storage.local.set({eula:'false'}, function(result) {
        console.log(result.eula)});
        // console.log returns undefined
        // Returns: TypeError: Cannot 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 returns undefined
        // Returns: TypeError: Cannot read property 'eula' of undefined
        chrome.storage.local.get("eula"), function(result){
        console.log("Get Result: " + result.eula)};
        // Returns 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();
    });
});

The problem is Chrome is not storing the data to local storage.

Answer 1

You didn't rightly use chrome.storage api. Take a look at the definition of StorageArea.get and StorageArea.set api.

1. StorageArea.set(object items, function callback) . callback function doesn't have a parameter
2. StorageArea.get(string or array of string or object keys, function callback) , you should put the callback as a parameter.

So a sample usage looks like:

chrome.storage.local.set({ eula: true });
chrome.storage.local.get('eula', function (results) {
    console.log(results.eula);
});

Answer 2

I think the issue comes from two small mistakes.

I believe when setting the key value pair

chrome.storage.local.set({eula:'false'}, function() {});

eula should be a string {'eula': 'false'} this could be the reason it is not being set in the first place.

the reason it is console.logging undefined is because set does not send a result parameter to the callback function that only happens with the get method.

If setting the eula to a string will set the storage object then your get method should stop throwing an error.

Answer 3

I appears that I had the syntax for the get wrong. I changed my javascript to the following:

function disagree(){
    chrome.storage.local.set({'eula':'false'}, function() {
        console.log("False")});
    document.getElementById("eulaDisagree").style.display = "block";
}
function agree(){
    chrome.storage.local.set({'eula':'true'}, function() {
        var eulaV;
        console.log("True");
        chrome.storage.local.get('eula', function(result){
        eulaV = result.eula;
        console.log(eulaV);
        });
    });
    document.getElementById("background").style.height = "0%";
    document.getElementById("foreground").style.height = "0%";
    document.getElementById("foreground").style.border = "none";
}

I am no longer getting any errors. Everything works fine.