HTML5 本地存储 - 我可以为每个键存储多个值，如果不能，我可以使用啥替代方案？

Posted 2023-02-21

【中文标题】HTML5 本地存储 - 我可以为每个键存储多个值，如果不能，我可以使用啥替代方案？

【英文标题】：HTML5 local storage - Can i store more than one value per key, if not what alternative i can use?HTML5 本地存储 - 我可以为每个键存储多个值，如果不能，我可以使用什么替代方案？

【发布时间】：2020-12-14 17:58:31

【问题描述】：

我有一个页面，用户可以通过它多次提交表单 我想将提交的每个值存储在单个本地存储键中，但问题是键只能存储一个值并被下一个值覆盖

还有其他选择吗？

【问题讨论】：

为什么不想使用多个键？

如何为每个提交的值创建一个键？我如何命名他们每个人？例如，用户提交一个值，然后将其分配给 key1 ，然后通过表单再次提交另一个值并将其分配给 key2 。但是如果用户提交 50 次，我们有 50 个不同的密钥，会不会很乏味？

您可以在表单的 input name="" 属性之后命名键。

可以在检索时使用 JSON.stringify() 和 JSON.parse() 将整个对象和数组存储在一个键中

@Yoda javascript 对象是可扩展的（即您可以向它们添加和删除属性） - 在我的回答的第 2 部分中，您可以看到代码 adds field5 到formState 对象。

【参考方案1】：

还有其他选择吗？

是的。使用您反序列化 + 编辑 + 重新序列化的 JSON 对象。

像这样：

// 1: Initial save:

const formState = 
    field1: document.getElementById( 'input1' ).value,
    field2: document.getElementById( 'input2' ).value,
    field3: document.getElementById( 'input3' ).value,
    field4: document.getElementById( 'input4' ).value
;

window.localStorage.setItem( "formState", JSON.stringify( formState ) );

（const关键字表示对象引用不能重新赋值，并不表示formState是不可变的）

---

要向对象添加新值，只需设置它（JavaScript object 值在概念上与哈希表/字典相同）：

const formState = JSON.parse( window.localStorage.getItem( "formState" ) );

formState.field5 = document.getElementById( 'input5' ).value;

window.localStorage.setItem( "formState", JSON.stringify( formState ) );

---

要从formState 对象中删除条目，请使用delete 关键字：

const formState = JSON.parse( window.localStorage.getItem( "formState" ) );

delete formState.field3; // This removes 'field3' completely.

window.localStorage.setItem( "formState", JSON.stringify( formState ) );

---

您还可以将整个 <form> 快速转储到一个对象中，如下所示：

// WARNING: This code is a quick-and-dirty demonstration, it is not production-quality. You'll need to sort-out handling of multiple-select <select> elements and other types of <input>, like file inputs.

const formState = ;

const form = document.getElementById( 'myForm' );

const inputs = form .querySelectorAll( 'input[name], select[name], textarea[name]' );

for( const input of inputs ) 
    let shouldInclude = true;
    if( input.tagName == 'INPUT' && ( input.type == 'radio' || input.type == 'checkbox') ) 
        if( input.checked === false ) shouldInclude = false;
    

    if( shouldInclude ) formState[ input.name ] = input.value;