로컬 스토리지란?
LocalStorage는 JavaScript를 사용하여 웹 브라우저에서 키: 값 쌍 형식으로 데이터를 저장하고 접근할 수 있는 웹 저장소입니다.localStorage를 사용하여 저장된 데이터는 수동 또는 프로그래밍 방식으로 삭제되지 않으면 영구적으로 보존됩니다.
본고에서 로컬 저장소를 사용할 때 사용할 수 있는 다섯 가지 방법, 로컬 저장소의 장점과 로컬 저장소를 사용할 때 고려해야 할 사항을 소개할 것이다.
메서드
위에서 말한 바와 같이 localStorage를 사용할 때 다섯 가지 방법이 있습니다.다음과 같습니다.
setItem () - 키:값 쌍을 localStorage에 저장
getItem() - 키
removietem () - 주어진 키
clear () - 모든 항목 삭제
키() - 주어진 색인에 대한 키
우리가 모든 방법을 연구하기 전에, 중요한 것은 조작된 로컬 저장소가 이러한 방법을 실행하는 현재 영역이 될 것이라는 것을 이해하는 것이다.
setItem(키, 값)
setItem 방법을 사용하여 localStorage에 새 데이터를 저장합니다.그것은 키와 값을 받아들인다.
로컬 스토리지.setItem('학원','자메이카 이공대학');
상기 코드는 school이라는 키를 만들고 자메이카 이공대학의 값으로 저장합니다.
localStorage에 객체 저장
주의해야 할 것은localStorage는 문자열 값만 저장할 수 있다는 것이다.만약 우리가 대상을 저장하고 싶다면, 우선 그것을 문자열 값으로 변환해야 한다.우리는 JSON을 사용하여 이 점을 실현한다.stringify () 방법입니다.
//사용자 객체 작성
사용자 = {
이름: "타슬란 그레이엄",
국적: 자메이카
};
로컬 스토리지.setItem('user',JSON.stringify(user));//사용자를 JSON 문자열로 저장
위의 코드는
user의 대상을 "{"name":"Taslan Graham","nationality":"Jamaican"}"로 변환하여 저장합니다.getItem(키)
getItem () 방법은 키를 받아들여 값을 되돌려줍니다.
로컬 스토리지.getItem("학교");
이렇게 하면
'University of Technology, Jamaica'가 반환됩니다.이전에 저장된 사용자 항목도 검색할 수 있습니다.
user=localStorage로 설정합니다.getItem(사용자);
되돌아오다
"{"name":"Taslan Graham","nationality":"Jamaican"}".이 JSON 문자열 값을 JavaScript 객체로 다시 변환할 수 있습니다.JSON.해결(사용자);//{이름: "타슬란 그레이엄", 국적: "자메이카"}
removeItem(키)
removeItem 방법은 키를 받아들여서localStorage에서 삭제합니다.
로컬 스토리지.removeItem("학교");
지우기()
clear 방법은 영역의localStorage에 있는 모든 데이터를 삭제합니다.
로컬 스토리지.지우기();
키()
키 방법은 숫자 (n) 를 받아들이고local Storage 대상의 n번째 키를 되돌려줍니다.
로컬 스토리지.키(0)
위 코드는 localStorage의 첫 번째 키를 반환합니다.
localStorage에 있는 모든 키에 접근해서 이름을 모를 때 키 방법은 매우 유용합니다.
for(상수 i=0;i
위문하다.로그(localStorage.getItem(key),
}
위의 코드에서, 우리는 0에서 순환하기 시작하고, 매번 교체될 때마다, 우리는 i의 값을 사용하여local Storage에서 이 위치의 키를 검색한다.우리는 키를 키 변수에 저장할 것이다.그리고 현재 키의 값을 컨트롤러에 기록합니다.
로컬 스토리지의 이점
localStorage는 매우 흥미로운 장점을 제공합니다.이러한 작업은 다음과 같습니다.
1. 로컬 저장소는 주요 현대 브라우저가 지원한다.
이것은 응용 프로그램에서 그것을 사용할 수 있다는 것을 의미하며 걱정하지 않아도 된다.
그러나 사용자의 브라우저가 로컬 저장소를 지원하는지 확인하려면 다음과 같이 할 수 있습니다.
만약(스토리지 유형)!=정의되지 않음)
//여기에서 localStorage에 대한 코드 작성
}그렇지 않으면 {0}
//로컬 스토리지가 지원되지 않음
//다른 것 좀 해봐
}
2. 간단한 캐시에 사용 가능
대부분의 브라우저는 최대 10MB의 웹 저장 공간을 제공한다.이것은 localStorage를 사용하여 데이터를 캐시할 수 있음을 의미합니다. 이 데이터는 변경이 적고 전체 응용 프로그램에서 자주 접근됩니다.
3. 데이터 접근이 편리하고 빠르다
네트워크 호출 없이 데이터를 검색할 수 있습니다.
고려 사항
localStorage를 사용할 때 고려해야 할 몇 가지가 있습니다.응, 그것들은 로컬 저장소를 사용할 때 할 수 없는 일인 것 같아.
1. 중요한 데이터를 로컬 스토리지에 저장하지 마십시오.
로컬 스토리지에 보안이 없습니다.누구나 데이터를 볼 수 있다.따라서 사용자 비밀번호와 같은 민감한 정보를 저장하는 것은 적합하지 않다.
2. 실제 데이터베이스가 필요할 수도 있습니다
저장된 데이터는 사용자의 브라우저에 로컬화되어 그곳에서 접근할 수 있습니다.따라서 localStorage는 데이터베이스를 대체할 수 없습니다.
본고에서 우리는 localStorage와 localStorage를 사용할 때 사용할 수 있는 방법을 소개했다.그 밖에 우리는 local Storage의 장점과 local Storage를 사용할 때 고려해야 할 사항도 연구했다.
만약 당신이 이 글을 좋아한다면, 당신에게 가장 가치 있는 평론을 남겨 주세요.유용하다고 느낄 수 있는 친구와 나눌 수도 있다.
다음까지 사고, 학습, 창조, 중복!
Reference
이 문제에 관하여(로컬 스토리지란?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/taslangraham/localstorage-23ec텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
