JS localStorage 저장 대상, sessionStorage 저장 배열 대상 작업 예제

이 사례 는 JS localStorage 저장 대상, sessionStorage 저장 배열 대상 작업 을 설명 합 니 다.여러분 께 참고 하도록 공유 하 겠 습 니 다. 구체 적 으로 는 다음 과 같 습 니 다.
머리말
최근 엔 엔 엔 골 라 로 쇼핑 카 트 기능 모듈 을 만 들 고 있다. 엔 골 라 의 워 치 감청 으로 데이터 가 바 뀌 면 자동 으로 페이지 를 렌 더 링 할 수 있 기 때문이다.그러나 문 제 는 이전 사용자 가 작 동 했 던 스타일 이 리 셋 된다 는 점 이다.
예 를 들 어 저 는 몇 개의 상품 을 선택 하여 결 제 를 준비 하고 상품 의 수량 을 수 정 했 습 니 다. 이때 요청 을 했 습 니 다. 페이지 데이터 가 렌 더 링 되 고 체크 된 상품 은 모두 선택 되 지 않 았 습 니 다.
선택 한 모든 상품 의 고유 Id 를 배열 에 저장 하고 localStorage 를 이용 하여 저장 하고 새로 고침 할 때마다 저 장 된 배열 을 가 져 와 Id 에 대응 하 는 배열 의 상품 을 다시 체크 하려 고 합 니 다.결 과 는 다음 과 같은 문제 가 발생 했다.

var a = [1,2,3];
window.localStorage.setItem('key',a);
var b = window.localStorage.getItem('key');
console.log(b,typeof b);//1,2,3  string

분명히 배열 이 들 어가 면 문자열 형식 으로 강 전 됩 니 다. 이것 은 제 가 원 하 는 것 이 아 닙 니 다. 찾 아 보면 json. stringify 와 JSON. parse 의 전환 을 이용 하여 목적 을 달성 할 수 있 습 니 다.
저장 소 배열
json. stringify 는 대상 을 JSON 문자열 로 변환 할 수 있 습 니 다.
JSON. parse 는 JSON 문자열 을 대상 으로 변환 할 수 있 습 니 다.
그러면 우리 가 저장 할 때 먼저 배열 을 JSON 문자열 로 바 꾸 고 꺼 내 서 배열 로 바 꾸 면 됩 니 다. 다음 과 같 습 니 다.

function storageObj(obj) {
  var checkedIdStr = JSON.stringify(obj);
  sessionStorage.setItem("key", checkedIdStr);
};
var arrBefor = [1,2,3];
storageObj(arrBefor);
var arrAfter = JSON.parse(sessionStorage.getItem("key"));
console.log(arrAfter,typeof arrAfter);//[1, 2, 3] "object"

저장 대상

function storageObj(obj) {
  var checkedIdStr = JSON.stringify(obj);
  sessionStorage.setItem("key", checkedIdStr);
};
var objBefor = {
  a:1,
  b:2
};
storageObj(objBefor);
var objAfter = JSON.parse(sessionStorage.getItem("key"));
console.log(objAfter,typeof objAfter);//{a: 1, b: 2} "object"

JSON 의 변환 값 을 이용 하여 저장 하 는 방식 은 매우 좋 으 며, 이외에 JSON 의 방법 은 딥 복사 에 도 사용 할 수 있다.
관심 있 는 친 구 는 온라인 HTML / CSS / JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 운행 효 과 를 테스트 합 니 다.
더 많은 자 바스 크 립 트 관련 내용 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,, 및자 바스 크 립 트 오류 와 디 버 깅 기술 총화
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.