每次单击按钮时，如何防止程序覆盖localStorage？

document.getElementById("submit").addEventListener("click", getElements) 

function getElements() { 

    var a = document.getElementById("sample").value; 
    var x = new obj(a); 

    function store() { 
    localStorage.setItem('todays-values', Object.values(x)); 
    } 

    store(); 
}

在一个单独的js文件我然后调用每次单击按钮时，如何防止程序覆盖localStorage？

localStorage.getItem('todays-values');

我得到的值，但如果我提出了新的投入我的HTML文件，然后点击提交按钮时，先前的值被覆盖和替换新的。如何存储提交的所有值并防止旧的值被替换？

我对Javascript非常陌生，所以我宁愿在不使用任何其他库的情况下解决此问题。

来源

2016-10-01 Alonishka

而不是覆盖您的本地存储项目，您应该将用户值存储在一个数组中。每次单击提交按钮时，您的脚本都应该获取本地存储项（它是一个数组），并将其附加到本地存储项并重写它。 – Terry

我已经考虑过了。尽管如此，如果你能发布一个真正有用的例子，它还是无法实现。 – Alonishka

我添加了一个示例如何读取和写回到localStorage：[见我的答案]（http://stackoverflow.com/a/39812320/931485） –

第一：看来你是混合的JavaScript一类的函数（这里有一个例子：What techniques can be used to define a class in JavaScript, and what are their trade-offs?）

例如，这就是等价类中的JavaScript：

function ClassName() { 
    var privateVar; 
    this.publicVar; 

    function privateFunction() {} 

    this.publicFunction = function() {}; 
}

你不应该在函数中包含一个函数，除非它具有含义（否则它会让其他人感到困惑），但是在给定的例子中你并不需要它。另外，我看不到创建新对象的原因。x - 如果您在保存之前创建对象，则可以保存该值，因为对象只包含sample的值，因此您可以编写类似这样的：

document.getElementById("submit").addEventListener("click", getElements); 

function storeElements() { 
    var sampleValue = document.getElementById("sample").value; 
    localStorage.setItem('todays-values', sampleValue);  
}

回到你的问题：

由于Kalamarico提到：如果你写新值到todays-values将覆盖旧的值，你可以简单地加载从localStorage的所有旧值追加新的，并将它们写回localStorage。

您还应该注意localStorage只接受字符串，所以您应该将对象串联起来（请参阅localStorage.setItem）。

function appendValueToStorage(key, value) { 
    var values = JSON.parse(localStorage.getItem(key)); 
    if (values === null) { 
    values = []; 
    } 

    values.push(value); 
    localStorage.setItem(key, JSON.stringify(values)); 
    console.log(localStorage.getItem(key)); 
} 

appendValueToStorage('todays-values', document.getElementById("sample").value);

该功能可以让你附加一些值，一键，你甚至可以重新包装这个功能，可以使用它在你的点击功能：

function onSubmitClick() { 
    appendValueToStorage('todays-values', document.getElementById("sample").value); 
} 

document.getElementById("submit").addEventListener("click", onSubmitClick);

随着console.log命令，您可以查看localStorage的当前内容（您也可以使用开发人员工具进行检查 - 我发现Chrome的工作效果最好，在应用程序 - >本地存储选项卡下，您可以检查您的页面的localStorage）。

来源

2016-10-01 23:10:23

很好的解释。非常感谢！ – Alonishka

@Alonishka请标记为答案，如果这是你正在寻找;） –

您需要详细了解localStorage，这是与HTML5一起推出的新功能，您可以看看here并查看所有功能。

localStorage将数据存储为JSON对象，如果您不知道什么是JSON，则需要查找信息。在javascript认为对象是这样的：

var myData = { 
    myName: 'Kalamarico', 
    myAge: undefined 
};

这是一个JavaScript对象，JSON是非常相似的，它是对象的表示。 localStorage的API存储你的数据，这样，当你这样做：

localStorage.setItem('todays-values', Object.values(x))

的localStorage保存新的条目，一键“今天值”和它的值是一个对象，因此，您的localStorage看来：

{ 
    "todays-values": { ... } 
}

每次设置“今天值”时，您都会覆盖密钥，因此，如果您可以保留旧值，则需要执行此操作，首先您可以在localstorage中获取项目（if有），然后你可以“合并”你的旧价值和新价值。或者你可以设置一个新的密钥，例如：“todays-values1”取决于你的需要。

来源

2016-10-01 22:13:34 Kalamarico

如果您需要每天只存储一个键值对，那么您可以在键字符串中添加日期。

否则怎么样编号键（ “yourKey_0”， “yourKey_1”，......），还存储在本地存储的电流（最大）指数（ “currentIndex”）：

function store(value) { 
    newIndex = localStorage.getItem("currentIndex") + 1; 
    localStorage.setItem("yourKey_" + newIndex, value); 
    localStorage.setItem("currentIndex", newIndex); 
}

如果您遇到存储整数值的问题，转换为字符串。

来源

2016-10-01 22:31:11

我认为这是一个真正的“哈克”解决方案，你可以'JSON.stringify'一个数组，并简单地把它放到'localStorage'中，而不是将数组分割成块，并给每个值一个不同的'key + index'命名并放入'localStorage'中。 –

@TobiasHelbich我同意，在大多数情况下（也可能是这种情况），您的解决方案会更好。然而在某些情况下，类似于我的解决方案的东西可能是实现它的方式。 –

每次单击按钮时，如何防止程序覆盖localStorage？

回答

相关问题