Question

我正在尝试将字符串保存到Chrome的本地存储，但我似乎无法做到。可能是我对函数参数实现有错误的想法（3年之后，我想我可能会得到它）但是任何有助于使这些代码工作的帮助将不胜感激。我想让它尽可能动态，允许我获取我写的任何文本输入字段的id并适当地更改存储的字符串。

这是我到目前为止的代码：

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

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

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

我的函数参数实现有点倒退吗？我真的以为我这次有了它..

Answer 1

当你写：

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

storeData（setData）正在开始时立即执行（绑定click事件时）。因此，它将传递您输入的初始值，该值可能为空。

所以你应该在存储数据时调用setData：

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

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

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

Answer 2

你必须这样做：

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

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

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

Answer 3

你可以不用争论地使用

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

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

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

Answer 4

您将保存setData中的值，这是一个函数，而不是函数返回的值。您必须调用该函数来获取返回值。

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

使用您当前的代码，您必须使用上面的代码段。但是在调用storeData之前检索数据更有意义，而不是传递函数。

Answer 5

您需要区分函数调用和函数引用。

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

为一个事件分配了一个回调 - 即对一个函数的引用 - 但你传递的是setData的返回值，它是一个字符串，而不是一个函数。

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

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

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

Answer 6

批量读取和写入是个好主意，例如每页读取一次，每页卸载一次。它确实取决于您的用例，但是，将数据存储在内存中，即。数据结构直到一些不太频繁的提交动作。

将数据写入Window.localStorage。

   localStorage.getItem(k);

从存储中读取数据

{{1}}

更新：

module I wrote in gist的片段，提供基本功能，例如;

得到
设置
删除
flush
具有
和一些可连接的功能。

希望这有帮助。

Answer 7

您应该使用更具描述性的函数名称来简化它：

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);

这种方式更通用，您甚至可以将其重复用于其他元素，从而改善其转向＆＃39; inputData＆＃39;参数。

您还可以在使用之前添加检查以验证本地存储是否可用：

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

在本地存储/功能使用中设置数据

7 个答案: