다양한 저장 옵션에 데이터를 저장하는 것은 매우 유용하다.그러나 어떤 저장 옵션이 특정한 용례에 가장 적합한지 알기 어렵다.그럼 각 옵션 간의 차이점을 토론해 봅시다.

쿠키, 로컬 및 세션 스토리지의 용도는 무엇입니까?

그것들은 모두 사용자의 브라우저에 정보를 저장하는 데 사용되며, 웹 사이트의 새 페이지로 이동한 후에도 이러한 정보를 방문할 수 있다.
이러한 데이터는 사용자가 사용 중인 브라우저에도 저장되므로 사용자가 웹 사이트를 연 브라우저는 현재 장치의 브라우저에만 저장됩니다.
즉, 나중에 다른 브라우저에서 다른 사이트를 열면 데이터가 더 이상 존재하지 않습니다.

스토리지 제한 사항

모든 저장 방법에는 저장할 수 있는 최대 데이터 양이 있다.로컬 스토리지와 세션 스토리지는 모두 상당한 메모리 용량을 가지고 있다.로컬 스토리지는 최대 10메가바이트, 세션 스토리지는 최대 5메가바이트까지 저장할 수 있습니다.
그러나 다른 한편, 쿠키는 4천 바이트에 불과할 정도로 용량이 제한적이다.그것의 용량은 매우 작다.그래서 너는 cookies에 너무 많은 정보를 저장해서는 안 된다.

들어가다

각 스토리지 방법의 액세스 수준은 약간 다릅니다.
로컬 스토리지는 사이트에 열려 있는 모든 창이나 탭에서 액세스할 수 있습니다.즉, 브라우저의 한 탭에 있는 로컬 저장소에 일부 데이터를 저장하는 경우 열려 있는 다른 모든 탭과 창에서 동일한 로컬 저장소를 사용할 수 있습니다.
그러나 세션 저장소에서 데이터는 세션 저장소 데이터를 설정하는 현재 탭에서만 사용할 수 있습니다.세션 저장소는 브라우저의 각 탭이 고유한 세션인 특정 세션에 바인딩됩니다.
마지막으로 쿠키는 로컬 저장소와 매우 비슷합니다. 모든 창이나 옵션에서 접근할 수 있기 때문입니다.서버에서도 쿠키에 접근할 수 있습니다.백엔드 서버에 보내는 모든 요청은 모든 쿠키를 보냅니다.따라서 신분 검증과 관련된 임무에도 사용된다.

기한이 되다

로컬 저장소는 수동으로 삭제하기 전에 데이터가 영원히 만료되지 않기 때문에 매우 유용하다.세션 저장 데이터는 탭에 해당하는 특정 세션에만 사용할 수 있기 때문에 탭을 닫은 후 즉시 만료됩니다.
쿠키의 고유한 점은 쿠키의 만료 날짜를 수동으로 설정할 수 있다는 점입니다.

구문

이제 서로 다른 저장 방법의 문법을 살펴봅시다.

데이터 저장:

로컬 저장소와 세션 저장소는 같은 문법을 가지고 있다.유일한 차이점은 localStorage 변수와 sessionStorage 변수다.
다른 경우 로컬 저장소나 세션 저장소 설정 데이터를 사용하려면 setItem 함수를 사용할 수 있습니다.

localStorage.setItem("name", "Rohan");
sessionStorage.setItem("name", "Rohan");

이 setItem 함수는 두 문자열의 매개 변수를 받아들인다.첫 번째 매개변수는 이름이고 두 번째 매개변수는 값입니다.
하지만 쿠키즈의 문법은 조금 다르다.document.cookie 객체에 액세스하여 쿠키로 설정해야 합니다.

document.cookie = "name=Rohan";

쿠키에 데이터를 저장하기 위해서는 document.cookie 의 값을 문자열에 사용해야 하며, 그 중 이름과 값은 등호로 구분됩니다.
만료 날짜를 설정하려면 expires 키를 UTC 날짜 값에 전달해야 합니다.우리는 또한 번호로 구분 expires 키와 name 키를 확보해야 한다.
구문은 다음과 같습니다.

document.cookie = 
       "name=Rohan; expires=Fri, 01 Jan 9999 00:00:00 GMT";

데이터를 가져오는 방법:

로컬 저장소와 세션 저장소에서 데이터를 얻기 위해getItem 또는 localStorage 변수.

localStorage.setItem("name", "Rohan");
localStorage.getItem("name"); //Rohan

sessionStorage.setItem("name", "Rohan");
sessionStorage.getItem("name");  // Rohan

하지만 과자 중에는 따로 과자를 구할 방법이 없다.과자를 얻는 유일한 방법은 한 번에 모든 과자를 얻는 것이다.

document.cookie = 
      "name=Rohan; expires=Fri, 01 Jan 9999 00:00:00 GMT";
document.cookie = 
      "lastName=Shakya; expires=Fri, 01 Jan 9999 00:00:00 GMT";
document.cookie // name= Rohan, lastName= Shakya

데이터를 삭제하려면 다음과 같이 하십시오.

sessionStorage 방법을 사용하여 로컬 저장소와 세션 저장소에서 데이터를 삭제하는 문법도 매우 비슷하다.

localStorage.removeItem('name');
sessionStorage.removeItem('name');

키 값 쌍의 이름인 매개변수를 사용하여 데이터를 삭제합니다.
그러나 쿠키에서 보시다시피 쿠키를 삭제하려면 쿠키를 다시 설정해야 하지만 빈 값을 주고 만료 날짜를 전달해야 합니다.

document.cookie = "name=; expires=Thu, 31 Dec 9999 23:59:59 GMT";

결론

여러 가지 저장 방법 사이에 미세한 차이가 존재하기 때문에, 대부분의 경우, 나는 항상 로컬 저장소나 세션 저장소를 사용한다.하지만 서버에 접근할 데이터가 필요하다면 cookies가 유용합니다.
좋아했으면 좋겠어요.🤔🤔