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

sessionStorage localStorage в javascript

19.03.2022 Марат 514 0 js |

Что такое 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)".

Можете не благодарить, лучше помогите!
Теги :
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
Еще никто не прокомментировал! COMMENTS+   BBcode
Подписаться + =

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
На отдельной : странице.
Последние комментарии :
Марат :
18.11.2022 17:21
Как же я вами завидую! Сколько у вас свободного…
подробнее.
>" :
18.11.2022 17:18
Читать тяжело. Я еще фильтрацию тегов потыкаю, если вы не…
подробнее.
Марат :
18.11.2022 17:17
А как восклицательные знаки? С ними всё нормально??? Или нет??? Вы к ним как…
подробнее.
Марат :
18.11.2022 17:15
В мире много разных отклонений... по статистике примерно 10% человек в странах имеют такие.... Была у меня…
подробнее.
qwe"> :
18.11.2022 17:00
Читать тяжело. Я еще фильтрацию тегов потыкаю, если вы не…
подробнее.
Марат :
20.10.2022 10:10
Очень рад за Вас!
подробнее.
ruweb
Страница загружена за : 0.02251 секунд. Подробнее