问题描述:

I'm attempting to simply save a string to Chrome's Local Storage, but I can't seem to do it. It could be that I've got the wrong idea about function argument implementation (after 3 years, I think I might be getting it) but any help getting this code to work would be appreciated. I wanted to make it as dynamic as possible, allowing me to take the id of any text input field I write and change the stored string appropriately.

Here's the code I've got so far:

function setData() {

dataToStore = document.getElementById('txtStore').value;

return dataToStore;

}

function storeData(data) {

localStorage.setItem('input', data);

}

btnStore.addEventListener('click', storeData(setData), false);

Is my implementation of function arguments a bit backwards? I really thought I had it this time..

网友答案:

When you write:

btnStore.addEventListener('click', storeData(setData), false);

storeData(setData) is executing immediately at the beginning (when you bind the click event). Therefore, it will pass the initial value of your input which is probably empty.

So you should call setData, when you store the Data:

function setData() {
    dataToStore = document.getElementById('txtStore').value;
    return dataToStore;
}

function storeData() {
    localStorage.setItem('input', setData());
}

btnStore.addEventListener('click', storeData, false);
网友答案:

you would have to do this:

function setData() {
    dataToStore = document.getElementById('txtStore').value;
    return dataToStore;
}

function storeData(dataFunct) {
    localStorage.setItem('input', dataFunct());
}

btnStore.addEventListener('click', storeData(setData), false);
网友答案:

you can use without argument

function setData() {
    dataToStore = document.getElementById('txtStore').value;
    return dataToStore;
}

function storeData() {
    var data = setData();
    localStorage.setItem('input', data);
}

btnStore.addEventListener('click', storeData(), false);
网友答案:

You're saving the value in setData, which is a function, not the value returned from the function. You have to invoke the function to get the return value.

function storeData(data) {
    vare returnedData = data()
    localStorage.setItem('input', data);
}

with your current code you'd have to use the above snippet. But it would make more sense to retrieve the data before invoking storeData, and not pass the function.

网友答案:

You need to differentiate between function invocations and function references.

btnStore.addEventListener('click', storeData(setData), false);

An event is assigned a callback - i.e. reference to a function - but you're passing it the return value of setData, which is a string, not a function.

function setData() {
    dataToStore = document.getElementById('txtStore').value;
    return dataToStore;
}

function storeData() {
    localStorage.setItem('input', setData());
}

btnStore.addEventListener('click', storeData, false);
网友答案:

You should simplify it a bit using more descriptive names for your functions:

function getDataFromElement(id){
    dataToStore = document.getElementById(id).value;
    return dataToStore;
}

function storeData(data) {
    localStorage.setItem('inputData', data);
}

function retrieveData() {
    return localStorage.getItem('inputData');
}

btnStore.addEventListener('click', storeData(getDataFromElement('txtStore')), false);

This way is more generic and you can even reuse it for other elements, improve it turning that 'inputData' into a parameter.

You could also add a check to verify that local storage is available before using it:

function canStorage(){
     return (typeof(Storage) !== "undefined") ? true : false; 
}
网友答案:

It is a good idea to batch your reads and writes, say one read per page and one write per page unload. It does depends on your use case, however, storing data in memory ie. data structure until some less frequent commit action.

To write data to Window.localStorage.

   localStorage.setItem(k, v);

To read data from storage

   localStorage.getItem(k);

Update:

A snippet of a module I wrote in gist which provides basic functions such as;

  • get
  • set
  • delete
  • flush
  • has
  • and a few chainable functions.

Hope this helps.

相关阅读:
Top