javascript - 使用本地存储创建注册和登录页面

Question

我需要使用 javascript 和 localstorage 创建一个注册和登录页面，但我对一些事情感到非常困惑。

假设需要保存的所有信息都是一个字符串，我希望在本地存储这些字符串的数组，该数组可以随时增长，并且只要不被清除，它就会不断增长。我需要能够稍后解析该数组并将字符串与将在登录页面中输入的字符串进行比较。如何在本地存储中创建字符串数组并访问它？我尝试了以下操作: localstorage.token = JSON.stringify(token); 但每次有新 token 时，它都会重新写入它。我读了一些帖子，但还是有点困惑。

谢谢。

Answer 1

好吧，尽管边缘仍然很粗糙，但这里有一些 proof of concept :

HTML:

<form>
    <input name='abc' value='' />
    <input name='def' value='' />
    <input name='ghi' value='' />
    <button type="button">Save</button>
</form>

JS:

$(function() {
    var $form = $('form'),
        $saveBtn = $('button'),
        myForm = {}, 
        myFormJsoned = localStorage.getItem('myform');

    if (myFormJsoned) {
        try {
            myForm = JSON.parse(myFormJsoned);
            $.each(myForm, function(i, obj) {
              $form[0][obj.name].value = obj.value;
            });
        }
        catch(e) {
            localStorage.removeItem('myform');
        }
    }
    $saveBtn.click(function() {
        localStorage.setItem('myform', 
            JSON.stringify($form.serializeArray()));
    });
});

重点是，当单击此按钮时，表单将使用 jQuery 方法序列化为数组(当然，使用 serialize 会更简单 - 如果 unserialize 可用)。然后它被 JSON 化并存储到 localStorage 的单个字段中。

当您加载页面时，过程相反:JSON 被解析为对象数组(jQuery.serializeArray 的结果)，此 AoO 再次插入到表单中(使用 $.each< 的便利性)。

您可能会问，这是什么概念？我的观点是，使用 localStorage 当然是可能的，因为它是一个单字符串容器 - 就像 cookie。但话又说回来，我会考虑为每个字段使用单独的容器:

localStorage.setItem('myform_abc', $form[0].abc.value);
localStorage.setItem('myform_def', $form[0].def.value);
localStorage.setItem('myform_ghi', $form[0].ghi.value);