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, 이름: mazey, 길이: 2}

다음과 동일:

 localStorage.name = 'mazey'localStorage.age = '23'localStorage // 저장소 {나이: 23, 이름: mazey, 길이: 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 // 저장소 {age: 23, name: mazey, length: 2}localStorage.removeItem('age') / / 정의되지 않은localStorage // {name: mazey, length: 1}localStorage.removeItem('age') // 정의되지 않음

localStorage에서 모든 키-값 쌍을 지웁니다.

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // 저장소 {age: 23, name: mazey, length: 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()>설정</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. 모바일 localStorage(H5, IOS, Android)에서는 예상치 못한 문제가 발생할 수 있습니다.

로컬 저장소 사용을 중지해주세요

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.