СКРИПТЫ
ТЕГИ:
php (285)
js (155)
html (135)
css (109)
html tags (61)
jquery (40)
edit text (37)
php array (30)
form html (30)
fonts (27)
ruweb.net (23)
foto (22)
online (20)
atom (20)
forum (19)
svg (18)
Показать еще :
hosting (17)
board (17)
js method (16)
html book (16)
php file (16)
color (15)
php date (15)
link (15)
js events (14)
input (14)
osclass (13)
table (13)
htaccess (13)
dw block (12)
path (12)
select (12)
php img (11)
form (11)
php time (11)
jsphp (11)
icon (11)
js delete (11)
download (11)
notepad (11)
mouse (10)
img (10)
url (10)
js time (9)
info (9)
yandex (9)
dosite (7)
hover (7)
cookie (7)
comment (7)
task (7)
php url (7)
js url (6)
mysql (6)
year (6)
click (6)
list (6)
iframe (6)
browser (5)
search (5)
ftp (5)
chart (5)
adminka (5)
php get (5)
value (5)
mb (5)
week (4)
console (4)
vk (4)
bbcode (4)
symbols (4)
js form (4)
js id (4)
mounth (4)
submit (4)
reg.ru (4)
scandir (3)
line (3)
pages (3)
https (3)
js post (3)
ucoz (3)
js img (3)
padding (3)
day (3)
captcha (3)
vs code (3)
ssl (3)
second (2)
cursor (2)
tag hr (2)
money (2)
рся (2)
height (2)
js vars (2)
title (2)
counter (2)
typeof (2)
details (2)
youtube (2)
video (2)
base64 (2)
seo (2)
qr kod (2)
arrows (2)
sitemap (2)
smile (1)
google (1)
windows (1)
archive (1)
domen (1)
numbers (1)
speed (1)
books (1)
scroll (1)
header (1)
days (1)

sessionStorage localStorage в javascript

19.03.2022 Марат 130 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
    Как и где увидеть 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
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =

Последние комментарии :
Марат :
28.04.2022 19:20
У меня на сайте - все скрипты рабочие! Приходите…
подробнее.
Игорь :
05.04.2022 03:52
Спасибо Большое Вам за счетчик скачиваний файлов! Вы единственный, кто выложил действительно рабочий код!…
подробнее.
Марат :
03.04.2022 11:16
Вы обратились не по адресу... Предположим... что у вас есть паравоз...на дровах... И вы обращаетесь в автосервис, …
подробнее.
Good_Serpent :
03.04.2022 08:18
Шара - "расшаренная", доступная для пользователей локальной сети папка. Там происходит обмен информацией,…
подробнее.
Марат :
02.04.2022 20:29
Я даже не знаю, что таоке "шара"... Думаю, что вам нужно искать на специализированном сайте посвященной…
подробнее.
Good_Serpent :
02.04.2022 19:54
Здравствуйте! Нужен скрипт, который бы закрывал файл на шаре, если он там открыт. Не удаётся его удалить для…
подробнее.
ruweb
Страница загружена за : 0.021912 секунд. Подробнее