페이지를 새로 고친 후 JS 변수가 값을 유지하는 방법은 무엇입니까?

페이지를 새로 고친 후 JS 변수가 값을 유지하는 방법은 무엇입니까? [복제]

---

이 질문에는 이미 답변이 있습니다.

• 페이지로드 사이에 변수 유지 4 개의 답변

자바 스크립트 변수를 영구적으로 변경할 수 있습니까? 마찬가지로 변수 X를 설정하고 1로 설정하면 버튼을 클릭하면 변수를 2로 변경합니다. 페이지를 새로 고칠 때 해당 변수를 2로 유지하려면 어떻게해야합니까?

---

window.localStorage또는 로 가능합니다 window.sessionStorage. 차이점은 sessionStorage브라우저가 열려있는 localStorage동안 브라우저를 다시 시작한 후에도 지속 된다는 것 입니다. 지속성 은 단일 웹 페이지가 아니라 전체 웹 사이트에 적용됩니다 .

다음 페이지에 반영해야 할 변수를 설정해야 할 경우 다음을 사용하십시오.

var someVarName = "value";
localStorage.setItem("someVarKey", someVarName);

그리고 페이지가로드 될 때와 같이 모든 페이지에서 다음과 같이하십시오.

var someVarName = localStorage.getItem("someVarKey");

.getItem()null저장된 값이 없거나 저장된 값 을 반환 합니다.

참고 만 문자열 값 이 저장 장치에 저장 될 수 있지만 사용에 의해 극복 될 수있다 JSON.stringify및 JSON.parse. 기술적으로, 당신이 전화 할 때마다 .setItem(), 그것은 .toString()가치를 부르고 그것을 저장할 것입니다.

MDN의 DOM 스토리지 가이드 (아래 링크 됨)에는 해결 방법 / 폴리 필이 있으며, 쿠키를 localStorage사용할 수없는 경우 쿠키와 같은 항목으로 대체 됩니다.

기존의 데이터를 사용하거나 객체 리터럴, 배열 등과 같은 모든 데이터 유형을 저장하는 기능을 추상화하는 고유 한 미니 라이브러리를 만드는 것은 나쁘지 않습니다.

---

참고 문헌 :

• 브라우저-https Storage: //developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
• localStorage-https : //developer.mozilla.org/en-US/docs/DOM/Storage#localStorage
• JSON-https : //developer.mozilla.org/en-US/docs/JSON
• 브라우저 스토리지 호환성 -http : //caniuse.com/namevalue-storage
• 객체 저장-HTML5 localStorage에 객체 저장

---

쿠키 및 이외에도 localStorage"반영구적"클라이언트 데이터를 저장할 수있는 다른 장소가 적어도 하나 있습니다 window.name. 할당 한 모든 문자열 값 window.name은 창이 닫힐 때까지 그대로 유지됩니다.

테스트하려면 콘솔 window.name = "foo"을 열고을 입력 한 다음 페이지를 새로 고치고 입력하십시오 window.name. 로 응답해야합니다 foo.

이것은 약간의 해킹이지만, 모든 요청으로 불필요한 데이터로 채워진 쿠키가 서버로 전송되는 것을 원하지 않고 localStorage어떤 이유로 (레거시 클라이언트) 사용할 수없는 경우 옵션이 될 수 있습니다 치다.

window.name또 다른 흥미로운 속성이 있습니다. 다른 도메인에서 제공되는 창에서 볼 수 있습니다. 의 거의 모든 다른 속성과 마찬가지로 동일한 출처 정책이 적용되지 않습니다 window. 따라서 사용자가 페이지를 탐색하거나 새로 고치는 동안 "반영구적"데이터를 저장하는 것 외에도 CORS-free cross-domain 통신에 사용할 수 있습니다.

주 window.name에만 문자열을 저장할 수 있지만,의 넓은 가용성 JSON,이 복잡한 데이터에 대한 많은 문제의 안된다.

---

페이지를 새로 고 치면서 값을 저장하려면 쿠키를 사용해야합니다. 당신처럼, 쿠키 액세스를 단순화하기 위해 많은 자바 스크립트 기반 쿠키 라이브러리 중 하나를 사용할 수있는 이 일

html5 만 지원하려면 localStorage / sessionStorage 와 같은 스토리지 API를 생각할 수 있습니다

예 : localStorage 및 쿠키 라이브러리 사용

var mode = getStoredValue('myPageMode');

function buttonClick(mode) {
    mode = mode;
    storeValue('myPageMode', mode);
}

function storeValue(key, value) {
    if (localStorage) {
        localStorage.setItem(key, value);
    } else {
        $.cookies.set(key, value);
    }
}

function getStoredValue(key) {
    if (localStorage) {
        return localStorage.getItem(key);
    } else {
        return $.cookies.get(key);
    }
}

---

클라이언트 측에 쿠키를 저장하면됩니다.

참고 URL : https://stackoverflow.com/questions/16206322/how-to-get-js-variable-to-retain-value-after-page-refresh