- 참고자료
mdn web docs
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
영문으로 된 것을 읽으면서 번역했다.
React 활용해서 github user finder 페이지를 만드는데 브라우저의 localStorage 를 활용해서 search bar 에 최근 검색어가 보이도록 하는 기능을 구현하고자 한다.
The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.window 인터페이스의 localStorage read-only 속성을 사용하면 문서의 원본에 대한 Storage 객체에 접근할 수 있으며, 저장된 데이터는 브라우저 세션 간에도 유지된다.
localStorage is similar to sessionStorage, except that while localStorage data has no expiration time, sessionStorage data gets cleared when the page session ends — that is, when the page is closed. (localStorage data for a document loaded in a "private browsing" or "incognito" session is cleared when the last "private" tab is closed.)localStorage 는 sessionStorage 와 유사하지만, localStorage 데이터에는 만료시간이 없는 반면, sessionStorage 데이터는 페이지 세션이 끝날 때 (즉, 페이지가 닫힐 때) 지워진다. ('비공개 탐색' 또는 '시크릿모드'에서 로드된 문서의 localStorage 데이터는 마지막 '비공개' 탭이 닫힐 때 삭제된다)
Value
A Storage object which can be used to access the current origin's local storage space.
Exception
SecurityError
- The origin is not a valid scheme/host/port tuple. This can happen if the origin uses the file: or data: schemes, for example.
- The request violates a policy decision. For example, the user has configured the browsers to prevent the page from persisting data.
Note that if the user blocks cookies, browsers will probably interpret this as an instruction to prevent the page from persisting data.
아래와 같은 경우 중 하나에서 발생한다:
- 원본이 유효한 스킴/호스트/포트 튜플이 아닌 경우. 이는 예를 들어 원본이
file:또는data:스킴을 사용하는 경우 발생할 수 있다. - 요청이 정책 결정을 위반하는 경우. 예를 들어, 사용자가 브라우저 설정을 통해 페이지가 데이터를 지속적으로 저장하는 것을 방지했을 경우이다.
사용자가 쿠키를 차단한 경우, 브라우저는 이를 페이지가 데이터를 지속적으로 저장하지 못하도록 하는 지시로 해석할 가능성이 높다.
Description
The keys and the values stored with localStorage are always in the UTF-16 string format, which uses two bytes per character. As with objects, integer keys are automatically converted to strings.localStorage 로 저장된 키와 값은 항상 UTF-16 문자열 형식으로 되어 있으며, 이 형식은 문자당 2바이트를 사용한다. 객체와 마찬가지로, 정수 키는 자동으로 문자열로 변환된다.
localStorage data is specific to the protocol of the document. In particular, for a site loaded over HTTP (e.g., http://example.com), localStorage returns a different object than localStorage for the corresponding site loaded over HTTPS (e.g., https://example.com).localStorage 데이터는 문서의 프로토콜에 특화되어 있다. 특히 HTTP(예:http://example.com)를 통해 로드된 사이트의 경우, localStorage는 HTTPS(예:https://example.com)를 통해 로드된 해당 사이트의 localStorage 와 다른 객체를 반환한다.
For documents loaded from file: URLs (that is, files opened in the browser directly from the user's local filesystem, rather than being served from a web server) the requirements for localStorage behavior are undefined and may vary among different browsers.file: URL로부터 로드된 문서들(즉, 웹 서버에서 제공되는 대신 사용자의 로컬 파일 시스템에서 직접 브라우저로 열린 파일들)의 경우, localStorage 동작에 대한 요구사항은 정의되지 않았으며, 다양한 브라우저 간에 차이가 있을 수 있다.
현재 모든 브라우저에서 localStorage는 각각의 file: URL 에 대해 다른 객체를 반환하는 것으로 보인다. 즉, 각각의 file: URL은 고유한 로컬 스토리지 영역을 가지고 있는 것처럼 보인다. 그러나 이러한 동작에 대한 보장은 없으므로, 앞서 언급했듯이 file: URL 에 대한 요구사항은 여전히 정의되지 않았기 때문에 이에 의존해서는 안된다. 따라서 브라우저들이 언제든지 file: URL에 대한 로컬 스토리지 처리 방식을 변경할 수 있다. 실제로 외부 브라우저들은 시간이 지남에 따라 이에 대한 처리 방식을 변경한 적이 있다.
Examples
The following snippet accesses the current domain's local Storage object and adds a data item to it using Storage.setItem().아래 snippet 은 현재 도메인의 로컬 스토리지 객체에 접근하여 Storage.setItem()을 사용하여 데이터 항목을 추가하는 상황 :
localStorage.setItem("myCat","Tom");localStorage 로 부터 아이템 읽어오기 :
const cat = localStorage.getItem("myCat");localStorage 의 아이템 삭제하기 :
localStorage.removeItem("myCat");localStorage 의 모든 아이템 삭제하기 :
localStorage.clear();NOTE
더 많은 예시를 위해서는 아래 링크를 참고하면 된다
Using the Web Storage API
