LocalStorage

localStorage[26/28]

Кексик наконец-то попал в Норвегию и во время путешествия начал вести путевые заметки. Даже создал для этого простую форму. Но из-за плохого интернета форму часто не удавалось отправить и введённая заметка терялась.

Как справиться с этой довольно часто встречающейся проблемой, когда введённые в форму данные теряются?

Для этого можно использовать одну из новинок HTML5 —localStorage. Эта технология относится к JavaScript, а не к HTML или CSS, но промолчать о ней мы не можем.

СутьlocalStorageили «локального хранилища» заключается в том, что в него можно записывать данные, которые будут сохраняться в браузере. Эти данные не исчезнут даже если вы закроете браузер и откроете его снова или уйдете со страницы и потом вернётесь на неё.

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

Память в браузере

\\ получить значение ключа из хранилища
localStorage.getItem();

\\создает новую запись в хранилище
localStorage.setItem();

\\ удаляет запись из хранилища
localStorage.removeItem();

\\полностью очищает хранилище
localStorage.clear();

все кроме IE выделяют 10Мб на каждый сайт (IE 10Мб на все)

Хранится информация ВЕЧНО! пока пользователь не снесёт браузер)

Простенький пример подключения localStorage для страницы с формой, на которой <textarea>:

        <script>
            if (window.localStorage) {
                var elements = document.querySelectorAll('[name]');

                for (var i = 0, length = elements.length; i < length; i++) {
                    (function(element) {
                        var name = element.getAttribute('name');

                        element.value = localStorage.getItem(name) || '';

                        element.onkeyup = function() {
                            localStorage.setItem(name, element.value);
                        };
                    })(elements[i]);
                }
            }
        </script>