Учебное пособие по началу работы с Html5 localStorage

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

Количество пар ключ-значение в localStorage.

 localStorage.length // 0localStorage.setItem('name', 'mazey')localStorage.length // 1

Добавьте/обновите пары ключ-значение localStorage.

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // Хранилище {возраст: 23, имя: лабиринт, длина: 2}

Эквивалентно:

 localStorage.name = 'mazey'localStorage.age = '23'localStorage // Хранилище {возраст: 23, имя: лабиринт, длина: 2}

Получает значение указанного ключа в localStorage.

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage.getItem('name') // mazeylocalStorage.getItem('age') // 23localStorage.getItem('sex ') // нулевой

Эквивалентно:

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage.name // mazeylocalStorage['age'] // 23localStorage.sex // не определено

Удаляет пару ключ-значение для указанного ключа из localStorage.

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // Хранилище {возраст: 23, имя: лабиринт, длина: 2}localStorage.removeItem('age') / / undefinedlocalStorage // {name: mazey, length: 1}localStorage.removeItem('age') // не определено

Очистите все пары ключ-значение в localStorage.

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // Хранилище {возраст: 23, имя: лабиринт, длина: 2}localStorage.clear()localStorage // Хранилище {длина: 0}

localStorage может хранить только строки, поэтому сложные значения, такие как массивы/объекты, необходимо сначала преобразовать в строки с помощью JSON.stringify(), а затем использовать JSON.parse() для преобразования их в сложные значения перед использованием.

 let arr = [1, 2, 3]localStorage.setItem('arr', arr)localStorage.getItem('arr') // 1,2,3// JSON.stringify()localStorage.setItem('arr', JSON.stringify(arr))localStorage.getItem('arr') // [1,2,3]JSON.parse(localStorage.getItem('arr')) ​​// [1, 2, 3]

Пусть окно контролирует хранилище localStorage. Когда значение localStorage метки изменяется, другие метки реагируют соответствующим образом.

test0.html — изменить localStorage.

 <input type=text id=input /><button onclick=setNameForStorage()>Set</button><script type=text/javascript> function setNameForStorage () { localStorage.name = document.querySelector('#input'). значение </script>

test1.html — реагирует на изменения localStorage.

 <script type=text/javascript> window.addEventListener('storage', e => { console.log(e.key, e.newValue) // имя 123 })</script>

1. localStorage можно использовать только под тем же доменным именем, а также с postMessage и iframe для обеспечения междоменной связи.
2. Более низкие версии IE не поддерживают localStorage.
3. Его необходимо использовать в серверной среде, то есть его нельзя использовать в аномальных средах, таких как file://.
4. В мобильном локальном хранилище (H5, IOS, Android) могут возникнуть непредсказуемые проблемы.

Пожалуйста, прекратите использование локального хранилища

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.