В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 15-04-2024! 🞨
Меню :
js (244)



Blog (1400)
php (331)
js (244)
html (147)
css (131)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
js date (33)
php array (33)
form html (30)
online (29)
fonts (26)
Показать еще :
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
svg (18)
input (18)
hosting (18)
php date (17)
html book (16)
info (16)
board (16)
php time (16)
color (15)
js events (14)
img (14)
js url (14)
js time (14)
notepad (13)
select (13)
знак (13)
osclass (13)
htaccess (13)
download (12)
table (12)
dw block (12)
php path (12)
keyboard (12)
php img (12)
form (11)
jsphp (11)
icon (11)
js delete (10)
yandex (10)
mouse (10)
keyframes (10)
chart (9)
dosite (9)
hover (9)
browser (8)
php post (7)
comment (7)
php url (7)
canvas (6)
click (6)
list (6)
adminka (6)
mysql (6)
vs code (6)
iframe (6)
php get (6)
js id (5)
js math (5)
reg.ru (5)
value (5)
mb (5)
heading (5)
tag a (5)
year (5)
ftp (5)
base64 (4)
day (4)
submit (4)
week (4)
js form (4)
symbols (4)
month (4)
console (4)
vk (4)
pages (4)
scandir (4)
bbcode (4)
php var (4)
ssl (4)
нок (4)
games (4)
task (4)
xml (4)
line (3)
ucoz (3)
domen (3)
https (3)
куб (3)
money (3)
captcha (3)
numbers (3)
js hash (3)
js post (3)
jquery post (3)
js img (3)
padding (3)
qr kod (2)
seo (2)
js vars (2)
prompt (2)
counter (2)
details (2)
height (2)
video (2)
youtube (2)
sitemap (2)
tag hr (2)
typeof (2)
рся (2)
google (2)
arrows (2)
rutube (1)
cursor (1)
нод (1)
archive (1)
scroll (1)
jino (1)
smile (1)
windows (1)
speed (1)

SessionStorage localStorage в javascript

Что такое LocalStorage и sessionStorage, как используется для чего. Примеры работы LocalStorage и sessionStorage.

Подробно о LocalStorage и sessionStorage

  1. Что такое sessionStorage и localStorage
  2. Как увидеть sessionStorage и localStorage
  3. 4 метода localStorage
  4. 4 метода sessionStorage
  5. Как установить sessionStorage(LocalStorage) нажав по кнопке
  6. Как удалить sessionStorage(LocalStorage) нажав по кнопке

  1. Что такое sessionStorage и localStorage

    Самое простое и короткое объяснение, что такое "sessionStorage и localStorage" ?

    sessionStorage и localStorage - это свойства браузера, которые применяются для взаимодействия пользователя и сайта.

    Если вы не в теме sessionStorage и localStorage

    ... то думаю, что вы ни *ера не поняли!

    Давайте по-другому...

    sessionStorage - это как сессия в php, только в javascript.

    localStorage - это cookie в php, только в javascript.

    В чем разница sessionStorage и сессия, localStorage и cookie?

    "sessionStorage и localStorage" + cookie... хранятся на стороне пользователя, т.е. в браузере.

    сессия - хранится на сервере.

    Хоть cookie и хранятся в браузере, но обрабатываются, меняются, удаляются на стороне сервера

    Что лучше использовать cookie или localStorage?

    Если вы(как например я) используете первым языком php, то логично предположить, что и cookie и сессия - будут стоять на первом месте. Даже просто от того, что взаимодействие(перекидывание данных) php и javascript - не является простым делом.

    Использование sessionStorage и localStorage - это скорее экзотика, чем реальные инструменты(для меня).

    Методы у sessionStorage и localStorage

    Методы у sessionStorage и localStorage абсолютно аналогичны.

    Хранимые данные sessionStorage и localStorage

    Данные хранятся только строковые(см. ниже - это про "значение".).

    Если требуется сохранить массив/объект, то необходимо его сериализовать

    // массив/объект

    var example = { 'first': 'second', 'array': [1, 2, 3] }

    // сериализуем example, после этого, это строковое значение

    var example2 = JSON.stringify(example)

    //запишем сериализованный объект в localStorage с ключом example

    localStorage.setItem('example', example2)


  2. 4 метода localStorage

    localStorage имеет 4 метода:

    Сохранение значения в localStorage

    // сохранение значения

    localStorage.setItem("Ключ", "Значение")

    Получение значения в localStorage

    // получение значения

    localStorage.getItem("Ключ")

    Удаление значения в localStorage

    // удаление значения

    localStorage.removeItem("Ключ")

    Очистка значения в localStorage

    // очистка всего хранилища

    localStorage.clear()


  3. 4 метода sessionStorage

    sessionStorage имеет абсолютно аналогичные методы, что мы видели в предыдущем пкнте:

    Сохранение значения в sessionStorage

    // сохранение значения

    sessionStorage.setItem("Ключ", "Значение")

    Получение значения в sessionStorage

    // получение значения

    sessionStorage.getItem("Ключ")

    Удаление значения в sessionStorage

    // удаление значения

    sessionStorage.removeItem("Ключ")

    Очистка значения в sessionStorage

    // очистка всего хранилища

    sessionStorage.clear()


  4. Как увидеть sessionStorage и localStorage

    Для того, чтобы увидеть, где находится sessionStorage(абсолютно аналогично и localStorage) - создадим простой пример установки "sessionStorage" :

    Код установки sessionStorage при загрузке страницы:

    Данный код установки sessionStorage сработает, когда вы откроете данную страницу!

    <script>
    sessionStorage.setItem("example", "Здесь значение")
    </script>

    Как и где увидеть sessionStorage и localStorage

    Для того, чтобы увидеть в браузере где sessionStorage и localStorage нам потребуется:

    В вашем браузере нажимаем исследовать элемент.

    Далее "Application".

    Слева ищем "Session Storage" - выбираем ваш сайт.

    Справа увидим все данные sessionStorage:

    Нажмите, чтобы открыть в новом окне.
    Как и где увидеть sessionStorage и localStorage

  5. Как установить sessionStorage(LocalStorage) нажав по кнопке

    Для того, чтобы установить "sessionStorage(LocalStorage) нажав по кнопке" вам понадобится:

    Кнопка по которой будем жать button:

    <button>Кнопка установки sessionStorage(LocalStorage)</button>

    Для обработки "клика" по кноке нам потребуется onclick - поставим его внутрь кнопки с функцией...

    <button onclick="myFoo()">Кнопка установки sessionStorage(LocalStorage)</button>

    Далее javascript...

    <script>
    function myFoo(){
    sessionStorage.setItem("example_2", "Здесь значение - 2")
    }
    </script>

    Живой пример установки sessionStorage(LocalStorage) нажав по кнопке

    Поместим приведенный код прямо здесь на странице...

    Теперь откройте sessionStorage(LocalStorage) хранилище, как было здесь рассказано и нажмите по кнопке "Кнопка установки sessionStorage(LocalStorage)".


  6. Как удалить sessionStorage(LocalStorage) нажав по кнопке

    Для того, чтобы "удалить sessionStorage(LocalStorage) нажав по кнопке" нам потребуется:

    Абсолютно аналогично предыдущему пункту, с изменением одного слова и удаляем значение...

    Изменяем название функции "myFoo2"

    Html код для удаления sessionStorage(LocalStorage)

    <button onclick="myFoo2()">Кнопка удаление sessionStorage(LocalStorage)</button>

    Javascript код для удаления sessionStorage(LocalStorage)

    <script>
    function myFoo2(){
    sessionStorage.removeItem("example_2")
    }
    </script>


    Живой пример удаления sessionStorage(LocalStorage)

    Поместим приведенный код прямо здесь на странице...

    Теперь откройте sessionStorage(LocalStorage) хранилище, как было здесь рассказано и нажмите по кнопке "Кнопка установки sessionStorage(LocalStorage)".

Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Теги:
sessionstorage localstorage sessionstorage js sessionstorage window sessionstorage sessionstorage setitem sessionstorage getitem sessionstorage javascript sessionstorage js sessionstorage clear localstorage и sessionstorage разница sessionstorage localstorage cookies разница localstorage vs sessionstorage js отличие localstorage и sessionstorage чем отличается localstorage от sessionstorage js sessionstorage примеры использования размер sessionstorage
Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.023196 секунд. Подробнее