JavaScript에서 localStorage 사용 방법 상세 정보

만약 당신이 개발자라면, 들어가고 싶습니다.NET의 세계, 당신은 어떤 가능성이 있는지 알아야 합니다.때문에NET Framework 예.NET 생태계에서 가장 유행하는 기술은 이것으로 다양한 응용 프로그램을 구축할 수 있지만 최근에 새로운 것이 생겼다. 예를 들면.NET Core 및.NET Standard library.프로젝트나 구축에서 사용할 수 있습니까?
localStorage 대상은 웹 프로그래밍에서 가장 광범위하게 응용되는 대상 중의 하나이다.그것은 사용자 컴퓨터에 로컬 저장 키 값 쌍의 간단한 해결 방안을 제공했다.
대부분의 웹 개발자들은 간단한 문법을 가지고 5MB에 달하는 데이터를 저장할 수 있기 때문에localStorage API를 좋아한다.
이외에도 모든 주류 브라우저의 최신 버전은 localStorage와 sessionStorage를 포함한 웹 Storage API를 지원합니다.Opera Mini만 웹스토리지 API를 지원하지 않습니다.
Chrome DevTools를 열면 브라우저가 웹storage API를 지원하는지 빠르게 확인할 수 있습니다."콘솔"으로 이동하여 아래의 코드 세션을 입력하고 Enter 키를 누르십시오.

typeof(Storage)

undefined를 받으면 브라우저는 웹storage API를 지원하지 않습니다.브라우저가 그것을 지원한다면, "function"을 보아야 합니다.
본고는 다음과 같은 문제를 탐구했다.

localStorage는 무엇입니까?

localStorage와 sessionStorage는 어떤 차이가 있습니까?

localStorage API를 사용하여 CRUD 작업을 수행하는 방법

흔히 볼 수 있는 로컬 저장소에는 어떤 구덩이가 있습니까?

localStorage의 제한 사항은 무엇입니까?

localStorage란 무엇입니까?

앞서 언급한 바와 같이localStorage 대상은 브라우저가 로컬로 지원하는 웹storage API의 일부분이다.이것은 간단하고 효과적인 키/값 저장 솔루션이다.
웹 개발자에게 localStorage 대상을 사용하는 가장 큰 장점은 오프라인으로 저장할 수 있다는 것이다.가장 중요한 것은 사용자가 브라우저를 닫거나 컴퓨터를 다시 시작할 때 우리는 데이터를 잃어버리지 않는다는 것이다.컴퓨터가 다시 시작된 후에도 사이트는 로컬 저장소 API를 사용하여 사용자 컴퓨터에 저장된 데이터를 읽을 수 있다.
이 해결 방안은 웹 개발자에게 몇 가지 재미있는 용례를 제공했다.

오프라인 스토리지 사이트의 사용자 설정

사용자 검색 기록 보존

카트에 보관된 물품

다음은 localStorage와 sessionStorage를 비교합니다.

localStorage와 sessionStorage 사이에는 어떤 차이가 있습니까?

이 두 개의api는 보기에는 같지만 실행 방식에는 미세한 차이가 있다.
localStorage API는 로컬에서 데이터를 저장하는 데 사용됩니다.따라서 사용자가 탭을 새로 고치거나 브라우저를 닫거나 컴퓨터를 다시 시작할 때 로컬에 저장된 데이터가 손실되지 않습니다.그것은 장기적으로 기본 데이터를 저장하는 이상적인 해결 방안이다.
sessionStorage API는 페이지를 새로 고친 후에도 유효하지만 같은 탭에서만 작동합니다.
즉, 애플리케이션을 위한 스토리지 솔루션을 선택할 때 주의해야 합니다.예를 들어 가장 좋은 방법은 사용자 설정 정보를 localStorage에 저장하는 것이다.반면 sessionStorage는 특정 세션에 데이터를 저장하는 데 가장 적합하다.

localStorage API를 사용하여 CRUD 작업을 수행하는 방법

이 섹션에서는 localStorage API를 사용하여 추가, 읽기, 업데이트 또는 삭제 작업을 수행하는 방법을 보여 줍니다.이를 바탕으로 특정 페이지의 local Storage를 지우는 기술을 보여 드리겠습니다.
우선, localStorage 대상에서 새로운 키 값 쌍을 만듭니다.setItem 함수는 키와 값을 수용합니다.키에 맞는 이름을 선택하면 이 키 이름을 사용하여 다시 검색할 수 있습니다.

localStorage.setItem(‘my-key', ‘some-value')

새로 만든 객체를 다시 읽어들입니다.

let item = localStorage.getItem(‘my-key')

console.log(item) // Output: “some-value”

이것은 매우 간단하다.my-key 값을 계속 업데이트합시다.같은 setItem 함수를 사용하여 값을 덮어씁니다.

localStorage.setItem(‘my-key', ‘new-value')

마지막으로 이 키를 삭제하겠습니다.removeItem 함수는 삭제할 키의 매개 변수를 받아들입니다.

localStorage.removeItem(‘my-key')

모든 키를 삭제했는지 확인하기 위해서,clear 함수를 사용하여 localStorage에 저장된 프로그램의 모든 내용을 삭제합니다.

localStorage.clear()

현재, 우리는 더욱 고급스러운 localStorage 조작을 위해 준비를 마쳤다.

고급 localStorage 작업: 반복

localStorage 객체와 찾기 키를 훑어보는 방법을 보여 줍니다.
첫 번째 방법은 가장 직접적인 for순환을 사용했다.localStorage 객체에서 length 속성을 직접 사용할 수 있습니다.

for(let i=0; i<localStorage.length; i++) {
 let key = localStorage.key(i)
 console.log(`${key} with value ${localStorage.getItem(key)}`)
}

우리도 직접 키 방법으로 상응하는 키를 검색할 수 있다.

for (let i = 0; i < localStorage.length; i++){
 let key = localStorage.key(i)
 console.log(key)
}

다음은 localStorage API를 사용할 때 피해야 할 구덩이를 살펴보겠습니다.

localStorage에서 흔히 볼 수 있는 구덩이

localStorage API와 상호작용할 때 가장 흔히 볼 수 있는 두 개의 구덩이를 살펴보자.
먼저 JSON 객체를 저장합니다.localStorage API는 키 - 값 쌍 스토리지로 설계되었습니다.따라서 이 값은 문자열만 받아들일 뿐 대상은 받아들일 수 없습니다.그러나 이것은 우리가 대상을 저장할 수 없다는 것을 의미하지 않는다.우리는 그것을 문자열로 서열화해야 한다.

const dinner = { apples: 5, oranges: 1 }
localStorage.setItem(‘my-dinner', JSON.stringify(dinner))

서열화된 객체를 읽을 때 JSON으로 다시 해석해야 합니다.

let dinner = JSON.parse(localStorage.getItem(‘my-dinner'))

그 다음에 부울 값을 저장해 보십시오.마찬가지로 localStorage API는 문자열만 지원합니다.부울 값을 저장할 때 조심해야 한다.
다행히도 이 솔루션은 JSON 객체를 저장하는 것과 유사합니다.부울 값을 저장하면 setItem 함수는 이러한 문자열 - "true"로 변환됩니다.문자열이 있는 부울 값을 읽으려면 JSON을 사용할 수 있습니다.parse 방법은 이를 볼 값으로 변환합니다.

let myBool = JSON.parse(localStorage.getItem(‘my-bool'))

localStorage의 제한 사항

이것은 localStorage 제한에 대한 빠른 회고입니다.

문자열 기반 스토리지

대부분의 브라우저에는 최대 5MB

의 저장 공간이 제한되어 있습니다.

커다란 문자열을 저장하려고 시도할 때 주 스레드가 막힙니다.문제가 발생할 수 있으므로 같은 키를 동시에 업데이트하지 마십시오.이런 상황에서 대체 저장 솔루션을 찾는 것이 가장 좋다. 왜냐하면localStorage API는 이 목적을 위해 설계된 것이 아니기 때문이다.

웹 Worker 또는 웹 서비스가 localStorage

에 액세스할 수 없음

에 내장된 안전 메커니즘이 없다.따라서 암호나 인증과 관련된 데이터를 저장하는 것을 권장하지 않습니다.사용자 브라우저에 접근할 수 있는 모든 사람은 도서관에서 사용할 수 있는 컴퓨터처럼 페이지를 열고 localStorage에 저장된 정보를 읽을 수 있다.

자바스크립트에서localStorage를 어떻게 사용하는지에 대한 이 글은 여기까지 소개되었습니다. 자바스크립트에서localStorage를 어떻게 사용하는지에 대한 자세한 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보시기 바랍니다. 앞으로 많은 응원 부탁드립니다!