Как хранить данные формы в локальном хранилище? - PullRequest
Новая
       23

Как хранить данные формы в локальном хранилище?

0 голосов
/ 15 мая 2019

Я реализую один процесс отправки формы, но я не использую БД (Backend). Я хочу хранить данные формы на стороне клиента или в браузере. Поэтому я планирую использовать местное хранилище. 

<html>

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>

<body>
    <div class="container">      
        <div class=" row ">
            <div class="col-md-6">
                <form  method="post">
                    <div class="form-group">
                        <label for="usr">Name</label>
                        <input type="text" class="form-control" id="usr" placeholder="Enter your name" required>
                    </div>
                    <div class="form-group">
                        <label for="phone">Phone</label>
                        <input type="text" class="form-control" id="phone" placeholder="Enter your phone" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" class="form-control" id="email" placeholder="Enter your email" required>
                    </div>
                    <div class="form-group">
                        <label for="pwd">Password</label>
                        <input type="password" class="form-control" id="pwd" required>
                    </div>
                    <button type="submit " class="btn btn-success" formaction="../BootStrapTemplate/detail.html">Submit</button>

                </form>
            </div>
        </div>
      
    </div>
</body>

</html>
Я хочу сохранить данные после нажатия на кнопку отправки. А также он перейдет на другую страницу (detail.html page), в detail.html я выведу всю информацию.

Некоторая дополнительная информация, которую я должен показать на странице подробностей, Id и Time.

enter image description here

Я хочу сохранить данные в соответствии с идентификатором (означает, что значение идентификатора сохраненных данных в первый раз должно быть 1, значение сохраненных данных во второй раз должно быть 2)

Я буду использовать localalstorage в первый раз. Так что я не так много знаю о местном хранении. Идентификатор должен быть уникальным для каждой записи. По мне, это лучшая идея. Если у кого-то есть хорошая идея хранить данные на стороне клиента, пожалуйста, дайте мне знать.

Я видел одну ссылку, но я не могу сделать для нескольких полей ввода, И я также хочу сформировать ключ, значение JOSN.

Ответы [ 2 ]

1 голос
/ 16 мая 2019

Доступны некоторые плагины, но если вы не хотите их использовать. Плагин для сохранения-формы-полей-значений-в-местном-хранилище

Вы можете использовать это.

window.localStorage - сохраняет данные без даты истечения срока действия

window.sessionStorage - сохраняет данные за один сеанс (данные теряются при закрытии вкладки браузера) *

Примечание : - Перед использованием веб-хранилища проверьте поддержку браузера для localStorage и sessionStorage .

в магазин 

localStorage.setItem("lastname", "Smith");

Для извлечения 

document.getElementById("result").innerHTML = localStorage.getItem("lastname");
0 голосов
/ 15 мая 2019

Это многошаговый процесс с использованием JavaScript.Измените свою страницу, чтобы сделать следующее (по порядку, все в JavaScript)

  • событие отправки формы - запрет по умолчанию (остановит отправку данных на сервер)
  • build buildданных формы
  • преобразовать объект JS данных формы в JSON с помощью JSON.stringify ()
  • установить для строки JSON значение ключа localStorage, например localStorage.myKey = myJSON;
  • , перенаправить страницу наdetail.html
  • доступ к localStorage и декодирование JSON
...