JS 연구 노트 - localStorage 및 sessionStorage

소개

HTML5 Web Storage는 클라이언트 측에 데이터를 저장하는 두 가지 새로운 방법인 localStorage 와 sessionStorage를 제공하며 , 이들은 window 객체에 마운트됩니다.이 둘의 주요 차이점은 수명 주기가 다르다는 것입니다.

localstorage는 표준 키-값 쌍(Key-Value, 줄여서 KV) 데이터 타입으로 단순하지만 확장이 용이하며, localstorage에 저장할 객체가 일정한 인코딩 방식으로 문자열로 변환되기만 하면 쉽게 지원할 수 있습니다.

개체를 json 문자열로 변환하여 개체를 저장하고 그림을 DataUrl(base64)로 변환하여 그림을 저장합니다. 또한 키-값 쌍 데이터 타입의 경우 "키가 고유하다"는 기능도 매우 중요한데, 동일한 키를 사용하여 값을 반복적으로 할당하면 마지막 값을 덮어쓰게 됩니다.

웹 저장소와 쿠키의 유사점 및 차이점

같은

• 사용자 데이터를 저장할 수 있습니다
• 저장된 데이터의 형식은 문자열 입니다.
• 저장 데이터의 크기에 제한이 있습니다.

다른

라이프 사이클이 다르다

• 이론적으로 localStorage 는 영구적으로 유효합니다 즉 적극적으로 비우지 않으면 사라지지 않으며 저장된 데이터가 브라우저에서 지정한 크기를 초과하더라도 이전 데이터는 비워지지 않고 오류만 보고됩니다.

• **sessionStorage**의 수명은 이름에서 알 수 있듯이 세션과 유사하며 브라우저(브라우저 탭 포함)를 닫으면 지워집니다 . sessionStorage의 수명이 너무 짧기 때문에 응용 시나리오가 매우 제한적이지만 다른 한편으로는 비정상적인 상황에 쉽게 노출되지 않고 상대적으로 안정적입니다.

• 쿠키 의 수명 주기를 사용자 정의할 수 있고 , 쿠키의 만료 시간을 설정할 수 있으며, 만료 시간 전에 데이터에 액세스할 수 있습니다.

다른 저장소 크기 제한

대부분의 최신 브라우저는 웹 저장소 한도가 5MB 이고 쿠키 한도가 4KB 입니다 .

다른 범위

• 쿠키 : 특정 도메인 이름에 바인딩되어 있으며 쿠키를 설정하고 이를 생성한 도메인 이름으로 요청을 보내면 쿠키가 포함됩니다. 이 제한은 다른 도메인이 아닌 승인된 수신자만 쿠키에 저장된 정보에 액세스할 수 있도록 합니다.

• sessionStorage : sessionStorage 개체는 특정 세션에 특정한 데이터를 저장하며 페이지 새로 고침 동안 존재할 수 있습니다. 서버 세션에 바인딩되어 있으므로 파일이 로컬로 실행될 때 사용할 수 없습니다. 원래 개체 저장소에 데이터를 제공한 페이지에서만 데이터에 액세스할 수 있기 때문에 다중 페이지 응용 프로그램에는 제한이 있습니다.

• localStorage : 동일한 localStorage 객체에 액세스하려면 페이지는 동일한 도메인 이름 (하위 도메인은 유효하지 않음)에서 가져와야 하며 동일한 프로토콜을 사용하고 동일한 포트에 있어야 합니다. 도메인 간 액세스를 허용하지 않음

서버와 통신

• 쿠키는 요청에 의해 서버에 전달되며, 매번 HTTP 헤더에 포함됩니다.쿠키를 사용하여 너무 많은 데이터를 저장하면 성능 문제가 발생합니다.
• Web Storage 데이터는 각 서버 요청에 의해 전달되지 않고 요청 시에만 데이터를 사용하며 서버와의 통신에는 참여하지 않습니다.

사용의 용이성

• 쿠키는 getCookie, setCookie 자체를 캡슐화해야 합니다.
• WebStorage는 기본 API를 사용하거나 리패키징할 수 있습니다.

웹 스토리지 API

localStorage 와 sessionStorage는 API 인터페이스가 통합되어 있으며, 다음은 localStorage를 예로 들어 API 사용법을 소개합니다.

키-값 쌍 추가

localStorage.setItem(key,value)이 메서드는 키 키에 값 값을 저장하는 데 사용됩니다.

setItem 메서드를 사용하는 것 외에도 다음 두 가지 형식을 사용할 수도 localStorage.key = value있습니다 localStorage['key'] = value.

참고: 키와 값의 값 유형은 String이어야 합니다 . 문자열이 아닌 경우 해당 **toString()** 메서드를 호출하여 저장을 위해 문자열로 변환합니다.

// 把一个用户名(lilei)存储到 name 的键上
localStorage.setItem('name', 'lilei');
// localStorage.name = 'lilei';
// localStorage['name'] = 'lilei';
// 把一个用户存储到user的键上
localStorage.setItem('user', JSON.stringify(id:1, name:'lilei'));

키 값 가져오기

localStorage.getItem(key)이 방법은 키에 해당하는 데이터를 얻는 데 사용됩니다. setItem 메소드와 마찬가지로 이 메소드도 값을 가져오기 위해 value = localStorage.keyand 를 사용할 수 있습니다.value = localStorage['key']

참고: 획득한 값은 문자열 타입이며, 다른 타입이 필요한 경우 수동 타입 변환이 필요합니다.

// 获取存储到 name 的键上的值
var name = localStorage.getItem('name');
// var name = localStorage.name;
// var name = localStorage['name'];
// 获取存储到user的键上的值
var user = JSON.parse(localStorage.getItem('user'));

키-값 쌍 삭제

localStorage.removeItem(key)메서드는 지정된 키의 항목을 삭제합니다.

참고: localStorage에는 데이터 만료 개념이 없으므로 모든 데이터는 개발자가 수동으로 삭제해야 합니다.

var name = localStorage.getItem('name'); // 'lilei'
// 删除存储到 name 的键上的值
localStorage.removeItem('name');
name = localStorage.getItem('name'); // null

모든 키-값 쌍 지우기

localStorage.clear()방법은 모든 저장소 내용을 삭제하는 데 사용됩니다 .

    // 清除 localStorage
    localStorage.clear();
    var len = localStorage.length; // 0

기타 방법

키가 존재하는지 확인

이 메서드를 사용하여 Object.hasOwnProperty()localStorage 개체에 속성이 있는지 여부를 확인할 수 있습니다.

localStorage.setItem('test','testVal')
localStorage.hasOwnProperty('test') //true

localStorage에서 키-값 쌍의 수를 가져옵니다.

localStorage의 길이 속성에 액세스하여 localStorage 개체에 저장된 키-값 쌍의 수를 가져올 수 있습니다.

localStorage.setItem('test','testVal')
localStorage.setItem('testB','testValB')
var num = localStorage.length //2

localStorage의 속성 이름 가져오기

localStorage.key(index)메서드는 지정된 인덱스의 키 이름을 가져오는 데 사용됩니다.

참고: 일찍 할당된 키 값에 해당하는 인덱스 값은 크고 할당된 키 값에 해당하는 인덱스 값은 작습니다 . key이 방법을 사용하여 localStorage에 저장된 키 값을 탐색할 수 있습니다.

localStorage.setItem('name','lilei');
var key = localStorage.key(0); // 'name'
localStorage.setItem('age', 10);
key = localStorage.key(0); // 'age'
key = localStorage.key(1); // 'name'

StorageEvent를 통한 스토리지 변경 대응

저장 이벤트는 저장된 데이터가 변경될 때 트리거됩니다.

단, 캡처해서 버블링하는 클릭 클래스의 이벤트와는 다르며, 저장 이벤트는 알림에 가깝고 취소할 수 없다는 점에 유의해야 합니다.

이 이벤트를 트리거하면 같은 도메인에 있는 다른 창의 저장 이벤트가 호출되지만 저장을 트리거하는 창(즉, 현재 창)은 이 이벤트를 트리거하지 않습니다 .

저장소 이벤트 개체의 공통 속성은 다음과 같습니다.

  oldValue：更新前的值。如果该键为新增加，则这个属性为null。
  newValue：更新后的值。如果该键被删除，则这个属性为null。
  url：原始触发storage事件的那个网页的网址。
  key：存储store的key名

function storageChanged() {
    
    
    console.log(arguments);
}

window.addEventListener('storage', storageChanged, false);