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

creating a registration and login pages with localstorage

本文关键字：登录 注册 创建 存储      更新时间：2023-09-26

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

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

谢谢。

好吧，尽管它仍然是粗糙的边缘，这里有一些概念的证明:

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

在你的例子中，token是一个字符串，所以如果你对它进行字符串化，它的值就会改变。

你不需要这么做，就这么做吧:

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/

相关文章：