создание регистрационных и логинных страниц с localstorage

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' 

EDIT: О регистрационном процессе/логин: 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 анализируется в Array of Objects (результат 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);