Question

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

让我们说所有需要保存的信息都是一个字符串，我希望本地存储的这些字符串数组可以随时增长，只要它不被清除它不断增长。我需要能够稍后解析该数组并将字符串与将在登录页面中输入的字符串进行比较。如何在本地存储中创建字符串数组并访问它？我尝试了以下内容：localstorage.token = JSON.stringify(token);但是每当有新令牌时，它都会重写它。我读了几篇文章，但我仍然有点困惑。

谢谢。

Answer 1

好吧，在你的情况下，令牌是一个字符串，所以如果你对它进行字符串化，它的值将会改变。

您不需要，所以只需：

localStorage.token = token;

您应该仅将JSON.stringify用于对象类型：

var t = {a: 5, b: 'Tom'};

// set
localStorage.special = JSON.stringify(t);

// get
var u = JSON.parse(localStorage.special);
console.log(u.a); // 5
console.log(u.b); // 'Tom'

编辑：关于您的注册/登录流程：http://jsfiddle.net/NAzZ5/

Answer 2

好吧，即使边缘仍然很粗糙，这里有一些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可用）。然后它是JSONed并存储在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);

使用localstorage创建注册和登录页面

2 个答案: