Javascript에서 SessionStorage 및 LocalStorage를 사용하는 방법
앞말
웹 개발자로서 웹 브라우저에 데이터를 저장하여 사용자 체험을 개선하고 웹 응용 프로그램의 성능을 향상시키는 것은 매우 흔한 일이다.대부분의 경우 LocalStorage와 SessionStorage를 사용할 수 있습니다.
본고는 보안과 사용자 체험 두 가지 측면에서 SessionStorage와 LocalStorage를 평가하고자 합니다.그리고 우리는 당신의 요구에 따라 적합한 사용 대상을 어떻게 선택하는지 토론할 것입니다.
SessionStorage 및 LocalStorage 소개
HTML5 이전에 개발자는 일반적으로 쿠키를 사용하여 클라이언트에 간단한 정보를 저장했다.HTML5가 발표된 후에 새로운 클라이언트가 로컬로 데이터를 저장하는 방법을 제공했다. 그것이 바로 웹 저장소이다. 이것은 LocalStorage와 SessionStorage로 나뉘는데 자바스크립트를 통해 웹 브라우저에서 키 값을 맞추는 형식으로 데이터를 저장할 수 있다.쿠키에 비해 다음과 같은 장점이 있습니다.
SessionStorage 및 LocalStorage 사용 방법
브라우저 윈도우 객체를 사용하여 SessionStorage 및 LocalStorage에 액세스할 수 있습니다.다음 예제를 참조하십시오.
sessionStorage = window.sessionStorage
localStorage = window.localStorage
// item
storage.setItem('name', 'Alice')
storage.setItem('age', '5')
// item
storage.getItem('name') // returns "Alice"
//get
storage.length // returns 2
// get key
storage.key(0) // returns "name"
// item
storage.removeItem('name')
//
storage.clear()LocalStorage와 SessionStorage의 차이점
LocalStorage와 SessionStorage 간의 주요 차이점은 브라우저 창과 옵션 카드 사이의 데이터 공유 방식이 다르다는 데 있다.
LocalStorage는 브라우저 창과 탭 간에 공유할 수 있습니다.즉, 여러 탭과 창에 응용 프로그램이 열려 있고, 탭이나 창에서 LocalStorage가 업데이트되면 다른 모든 탭과 창에서 업데이트된 LocalStorage 데이터를 볼 수 있습니다.
그러나 SessionStorage 데이터는 다른 탭과 창에 독립적입니다.두 탭이 동시에 열려 있는 경우 그 중 하나가 SessionStorage를 업데이트하면 다른 탭과 창에 반영되지 않습니다.예를 들어 사용자가 두 개의 브라우저 옵션을 통해 두 개의 호텔 방을 예약하고 싶다고 가정한다.이것은 단독 세션 데이터이기 때문에 SessionStorage를 사용하는 것은 호텔 예약 응용 프로그램의 이상적인 선택이다.
보안 지침
Web Storage의 저장 대상은 도메인 이름과 독립적이다. 즉, 서로 다른 사이트 아래의 웹 응용 프로그램은 자신의 독립된 저장 대상을 가지고 서로 접근할 수 없다는 점에서 SessionStorage와 LocalStorage는 같다.
예: abc에 배치합니다.com의 웹 응용 프로그램에서xyz에 접근할 수 없습니다.com의 Web Storage 스토리지 객체입니다.
www.grapecity에도 불구하고 하위 도메인 이름도 마찬가지입니다.com.cn과 gcdn.grapecity.com.cn은 그레이프시티에 속합니다.com.cn 메인 도메인 아래에 있지만 서로의 저장 대상에 접근할 수 없습니다.
또한 하위 도메인 이름이 서로 독립적일 뿐만 아니라 http와 https 프로토콜 사용에 대해서도 다르기 때문에 이 점도 주의해야 한다.
사이트 간 스크립트 공격(XSS) 대응
우선 XSS 공격은 무엇입니까?
XSS는 웹 페이지에 악성 스크립트를 추가하여 브라우저를 통해 불러와서 공격을 하고 프라이버시 정보를 얻는 목적을 달성한다.
LocalStorage와 SessionStorage는 이 점에서 XSS 공격을 받기 쉽다.공격자는 저장소 대상에 악성 스크립트를 직접 추가하여 실행할 수 있습니다.따라서 일부 민감한 개인 정보를 웹 저장소에 저장하는 것은 그다지 권장하지 않는다. 예를 들어
어떻게 공격을 피합니까?
사용자 환경 향상
비록 일부 민감한 데이터는 사용을 피해야 하지만, 우리는 여전히 WebStorage를 통해 웹 응용 프로그램의 사용자 체험을 개선할 수 있다
예를 들어 사용자가 폼을 작성하고 있지만 일부 이유로 탭/창을 닫았지만 폼 LocalStorage는 사용자 폼을 자동으로 저장하는 기능을 실현하여 사용자가 다시 열면 이전에 작성한 정보가 자동으로 복구됩니다.
<!DOCTYPE html>
<html>
<body>
<h2> </h2>
<form>
<label for="lname"> :</label><br>
<input type="text" id="lname" name="lname" value="" onchange="save(this)">
<label for="fname"> :</label><br>
<input type="text" id="fname" name="fname" value="getValue(this)" onchange="save(this)"><br>
</form>
<script>
localStorage= window.localStorage
function save(input) {
localStorage.setItem(input.id, input.value)
}
document.getElementById("fname").value=localStorage.getItem("fname")
document.getElementById("lname").value=localStorage.getItem("lname")
</script>
</body>
</html>스토리지 객체를 사용하여 브라우저 캐시
일반적으로 우리는 웹 응용 프로그램에서 사용할 수 있도록 응용 데이터를 캐시할 수 있다.예를 들어 웹 응용 프로그램은 모든 국가의 화폐 데이터를 불러와야 합니다. WebStorage를 사용하지 않는 상황에서 가져오기 목록을 불러올 때마다 HTTP 요청을 보내서 가져오고, 데이터를 LocalStorage에 저장하면 직접 데이터를 얻을 수 있습니다.
LocalStorage가 만료되지 않는 특성 때문에 사용자는 페이지를 열 때 대상의 내용을 저장할 수 있으며, 사용자가 LocalStorage 데이터를 삭제하려는 것도 간단하기 때문에 브라우저 캐시 내용을 지우면 된다.
LocalStorage 변경 내용 모니터링
Local Storage는 로컬 영구화 저장소로 사용할 수 있는 대상이다. 우리는 그 안에 데이터 저장소를 추가할 수 있다. 마찬가지로 사용자가 조작하는 상황에서 변화가 발생할 때 우리도 감청할 수 있어야 한다. 변화가 발생할 때storage 이벤트를 촉발할 수 있다. 우리는 윈도우에서 이 사건을 감청해서 논리적인 조작을 할 수 있다.
window.addEventListener('storage', () => {
...
});
window.onstorage = () => {
...
};총결과 결론
사용 상황에 따라 LocalStorage 및 SessionStorage를 선택할 수 있습니다.응용 프로그램이 여러 브라우저 창과 탭에서 데이터를 공유해야 하는 경우 LocalStorage를 사용하십시오. 그렇지 않으면 SessionStorage를 사용하십시오.
SessionStorage와 LocalStorage 모두 XSS 공격을 받기 쉽습니다.따라서 민감한 데이터를 브라우저 저장소에 저장하는 것을 피하십시오.
마지막으로, WebStorage는 매우 유용하지만, 아래와 같은 상황에서 사용하는 것을 권장합니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
java,python,JavaScript 및 jquery 순환 문장의 차이2. 자바 순환 문장 조건 문장이 무엇이든지 간에 코드 블록은 최소한 한 번 실행되고do/while 순환을 사용할 수 있습니다.do/while 문법: 즉, 코드 블록을 먼저 집행한 다음에 조건이 성립되었는지 판단하고...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
