489. (javaScript) [설명 정리] 로컬스토리지 LocalStorage 내에 저장 가능한 데이터 용량 사이즈 정리

---

[개발 환경 설정]

​

개발 툴 : Edit++

​

개발 언어 : JavaScript

​

 

---

[소스 코드]

 

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / LocalStorage / 로컬스토리지


- 사전) 웹 스토리지 (Web Storage) 간단 설명 : 

  >> 웹 스토리지 (Web Storage) 는 서버가 아닌, 클라이언트(브라우저)에 데이터를 저장할 수 있도록 지원하는 기능입니다

  >> 웹 스토리지 (Web Storage) 는 Key 와 Value 형태로 브라우저에 데이터를 저장할 수 있습니다

  >> 웹 스토리지 (Web Storage) 는 로컬스토리지(Local Storage) , 세션 스토리지(Session Storage) 등의 저장소를 각각 제공합니다

  >> 웹 스토리지 (Web Storage) 는 크롬 및 엣지 등 브라우저에서 개발자 도구를 사용해 저장된 데이터를 확인할 수 있습니다

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[설명 정리]
-----------------------------------------------------------------------------------------

1. ✅ 로컬스토리지 (Local Storage) 간략 설명 정리 : 

  >> 로컬스토리지 (Local Storage) 는 window.localStorage 객체를 사용하며, 브라우저를 종료해도 명시적으로 지우지 않는 한 영구적으로 저장되는 데이터입니다

  >> 로컬스토리지 (Local Storage) 는 도메인별로 생성되며, 다른 도메인의 로컬 스토리지에는 접근이 불가능합니다

  >> 로컬스토리지 (Local Storage) 는 지속적으로 필요한 정보를 저장할 때 사용합니다 


2. 로컬스토리지 (Local Storage) 에 저장 가능한 용량 범위 : 

  >> 브라우저마다 조금씩 다르지만, localStorage 에 저장 가능한 용량은 보통 약 5MB 내외 (도메인 (origin) 기준) 입니다

    - 다만 브라우저별로 2MB ~ 10MB 범위에서 차이가 있습니다

    - 일부 브라우저는 2MB 정도만 제공하며, 다른 브라우저는 10MB 까지 허용하기도 합니다

    - 사용자 설정 또는 브라우저 정책에 따라 저장 가능한 용량 범위는 달라질 수 있습니다.

  >> localStorage 용량 제한은 “origin 전체 기준”이며, key-value 단위의 별도 제한은 없습니다


3. 로컬스토리지 (Local Storage) 에 저장 가능한 문자열 최대 개수 : 

  >> 대략적으로 localStorage 5MB 용량 기준, 문자열은 약 260 만 글자(2.6M characters) 정도 저장할 수 있습니다

    - localStorage 는 DOMString(UTF-16) 으로 저장되므로 문자 1개 = 2바이트 계산

  >> localStorage 5MB 용량 기준 문자열 저장 계산 방식 

    - 5MB = 5 * 1024 * 1024 bytes = 5,242,880 bytes
    - UTF-16 문자 1개 = 2 bytes
    - 저장 가능한 글자 수 = 5,242,880 / 2 = 2,621,440 characters (캐릭터)


4. 로컬스토리지 (Local Storage) 최대 저장 용량 (ex : 5MB) 을 초과해서 저장하려는 경우 : 

  >> localStorage 용량 (예: 약 5MB) 을 초과해서 저장하려고 하면 오류가 발생합니다 (QuotaExceededError 예외(Exception) 발생)

  >> localStorage는 브라우저마다 2MB~10MB 정도를 허용하지만, 제한을 넘는 순간 브라우저 엔진이 예외를 발생시킵니다
  
    try {
      localStorage.setItem("bigData", twokString);
    } catch (e) {
      console.log(e.name); // ❌ "QuotaExceededError"
    }


5. ✅ 로컬스토리지 (Local Storage) 에 저장 된 데이터가 사라질 수 있는 상황 정리 : 

  >> 사용자가 브라우저 데이터를 직접 삭제한 경우

    - “쿠키 및 사이트 데이터 삭제”, “캐시 삭제”, “전체 브라우징 데이터 삭제” 등을 하면 localStorage도 함께 삭제됨

  >> 브라우저 저장 용량 초과 시 자동 삭제 (Eviction)

    - 브라우저는 origin(도메인) 단위로 저장소를 관리하며, 저장 공간이 꽉 차면 오래된 사이트부터 데이터를 자동으로 삭제(evict) 할 수 있음

  >> 브라우저가 “사이트 데이터 정리 정책”을 적용한 경우

    - 일부 브라우저는 일정 기간 방문하지 않은 사이트의 데이터를 자동 삭제하는 정책을 갖고 있음

  >> 프라이빗/시크릿 모드 사용 시 

    - 대부분 브라우저는 시크릿(비공개) 모드에서 종료 시 localStorage를 자동 삭제함

  >> 같은 origin 기준 변경(도메인, 서브도메인, 포트 변경 등)

    - localStorage는 origin(스킴 + 호스트 + 포트) 기준으로 저장되며, 아래와 같은 변화가 있으면 origin의 localStorage를 읽을 수 없음
    - 변경 : http://example.com → https://example.com
    - 변경 : example.com → sub.example.com
    - 변경 : example.com:80 → example.com:8080

  >> 브라우저 프로필 손상 또는 재설치

    - 브라우저 업데이트나 장애로 인해 사용자 프로필이 새로 만들어졌을 때 기존 localStorage가 사라질 수 있음

  >> 서드파티 프레임(iframe)에서의 partitioned storage 정책

    - 일부 브라우저는 3rd-party iframe 내 localStorage를 분리·제한할 수 있으며, 이 스토리지는 상황에 따라 삭제될 수 있음


6. ✅ 로컬스토리지 (Local Storage) 데이터 저장, 불러오기, 삭제 예시 코드 첨부 : 

  >> 데이터 저장 코드 : 

    try {
          
      const twokString = "hello";

      localStorage.setItem("twokKey", twokString); // // twokKey = key / twokString = value

    } catch (e) {
      console.log(e.name); // ❌ "QuotaExceededError" : 최대 용량 초과 저장 시 에러 발생 name
    }

  >> 데이터 불러오기 코드 :

    const keyName = "twokKey";

    const valueData = localStorage.getItem(keyName);

  >> 특정 데이터 삭제 코드 :

    const keyName = "twokKey";

    localStorage.removeItem(keyName);

  >> 전체 데이터 삭제 코드 :

    localStorage.clear();

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

[로컬 스토리지 (local storage) 사용해 데이터 저장 및 삭제 수행]

https://kkh0977.tistory.com/860

https://blog.naver.com/kkh0977/222395674862?trackingCode=blog_bloghome_searchlist


[로컬 스토리지 (local storage), 세션 스토리지 (session storage) 지원 여부 확인]

https://kkh0977.tistory.com/862

https://blog.naver.com/kkh0977/222396162992?trackingCode=blog_bloghome_searchlist


[웹 스토리지 (Web Storage) , 로컬 스토리지 (Local Storage) , 세션 스토리지 (Session Storage) 개념 설명]

https://kkh0977.tistory.com/1146

https://blog.naver.com/kkh0977/222476213099?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/860

55. (javascript/자바스크립트) 로컬 스토리지 (local storage) 사용해 데이터 저장 및 삭제 수행

---