sessionStorage와 localStorage의 차이점은 다음과 같습니다. 1. localStorage에는 만료 시간이 없습니다. 2. sessionStorage는 세션에 대한 데이터를 저장하며 수명 주기는 사용자가 브라우저를 닫을 때 데이터가 삭제됩니다. .
sessionStorage와 localStorage의 차이점
우리 모두 알고 있듯이 HTML 5 표준이 등장한 이후 현지화된 저장소가 인기 검색 키워드가 되었습니다. HTML 5 초기에는 로컬 저장소의 두 가지 방법이 있었습니다. 하나는 웹 저장소이고 다른 하나는 웹 SQL이었습니다. 웹 SQL의 구현은 SQLite를 기반으로 하기 때문에 DataBase의 방향에 더 치우쳐 있으며, W3C는 2011년 11월 공식적으로 웹 SQL 사양을 더 이상 유지하지 않겠다고 발표했기 때문에 현재 웹 SQL 사양은 해당 범위에 포함되지 않습니다. HTML 5의 따라서 현재 우리가 자주 이야기하는 HTML 5 로컬 저장소는 대부분 웹 저장소를 의미합니다.
다음은 WebStorage와 그 두 가지 형태에 대한 자세한 설명과 설명입니다.
1. webStorage
webStorage는 HTML5에서 도입된 중요한 기능으로, 쿠키와 유사하게 클라이언트에 로컬로 데이터를 저장할 수 있는 경우가 많습니다. 쿠키보다 강력합니다. 쿠키의 크기는 약 4Kb(브라우저마다 크기가 다름)에 불과한 반면 webStorage의 크기는 5MB입니다. API에서 제공하는 메소드는 다음과 같습니다.
setItem(key, value) - 키-값 쌍의 형태로 데이터와 정보를 저장합니다.
getItem(key) ——데이터를 가져오고 키 값을 전달하여 해당 값을 가져옵니다.
removeItem(key)——단일 데이터를 삭제하고 키 값을 기준으로 해당 정보를 제거합니다.
clear()——모든 데이터 삭제
key(index)——인덱스 키 가져오기
2 localStorage
localStorage의 수명 주기는 영구적입니다. localStorage를 사용하여 데이터를 저장하는 경우, 브라우저를 닫더라도 데이터를 적극적으로 삭제하지 않는 한 데이터는 사라지지 않습니다. localStorage에는 길이 속성이 있으므로 해당 데이터 레코드 수를 확인할 수 있습니다. 사용법은 다음과 같습니다.
var storage = null;
if(window.localStorage){ //判断浏览器是否支持localStorage
storage = window.localStorage;
storage.setItem("name", "Rick"); //调用setItem方法，存储数据
alert(storage.getItem("name")); //调用getItem方法，弹框显示 name 为 Rick
storage.removeItem("name"); //调用removeItem方法，移除数据
alert(storage.getItem("name")); //调用getItem方法，弹框显示 name 为 null
}localStorage는 sessionStorage보다 간단하고 주의할 점이 많지 않습니다.
3. sessionStorage
sessionStorage의 수명주기는 브라우저가 닫히기 전입니다. 즉, 전체 브라우저가 닫힐 때까지 데이터는 항상 존재합니다. sessionStorage에도 length 속성이 있으며 기본적인 판단 및 사용법은 localStorage와 동일합니다. 다음 사항에 유의해야 합니다.
<1> 페이지를 새로 고쳐도 데이터가 지워지지 않습니다.
확인을 위해 두 개의 html 파일을 준비했습니다. 하나는 index.html이고 다른 하나는 text.html입니다. text.html의 경우 그 출처에 대해서는 나중에 자세히 설명하겠습니다. 두 가지의 HTML 코드는 다음과 같습니다.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script>
function submit() {
var str = document.getElementById("text").value.trim();
setInfo(str);
document.getElementById("text").value = "";
}
//储存数据
function setInfo(name) {
var storage = window.sessionStorage;
storage.setItem('name', name);
}
//显示数据
function shows() {
var storage = window.sessionStorage;
var str = "your name is " + storage.getItem("name");
document.getElementById("text").value = str;
}
</script>
</head>
<body>
<input type="button" value="Login" οnclick="submit()" />
<input type="text" name="text" id="text" />
<input type="button" value="show" οnclick="shows()" />
<a href="text.html" target="_blank">点击打开</a>
</body>
</html>text.html 페이지는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var storage = window.sessionStorage;
alert(storage.getItem("name"));
</script>
</body>
</html>index.html 페이지를 연 결과는 다음과 같습니다.
show 버튼을 클릭하면 입력 상자에 "your name is null"이 표시됩니다. 이때 sessionStorage에 키 값 "name"이 저장된 데이터가 없습니다. 텍스트에 "Rick"을 입력한 후 로그인 버튼을 클릭합니다. 입력 상자가 지워지면 데이터가 sessionStorage에 저장되었습니다. 그런 다음 표시 버튼을 클릭하면 "당신의 이름은 Rick입니다"가 표시됩니다. 이때 브라우저를 클릭하여 웹 페이지를 새로 고친 다음 표시 버튼을 클릭하세요. 입력 상자에는 여전히 "당신의 이름은 Rick입니다"라고 표시됩니다
현재 페이지에서 열린 링크만 sessionStorage 데이터에 액세스할 수 있습니다.
준비된 text.html 페이지를 기억하시나요? 이제 그 역할을 수행할 차례입니다. 확인하기 위해 위의 단계를 수행하고 text.html을 엽니다. 결과는 다음과 같습니다.
이 값이 null이고 "name" 값을 가져올 수 없음을 알 수 있습니다. 이제 text.html 페이지를 닫고 index.html 페이지를 클릭하여 링크를 열면 다음과 같은 결과를 볼 수 있습니다.
따라서 현재 페이지에서 열린 링크에서는 sessionStorage 데이터에 접근할 수 있음을 알 수 있습니다. 이내에. 나중에 다른 테스트를 거친 후 index.html에서 text.html 페이지를 열고 index.html을 닫은 후 text.html을 새로 고치면 sessionStorage의 데이터에도 액세스할 수 있다는 사실을 발견했습니다. sessionStorage의 데이터는 index.html과 여기에서 열린 모든 페이지가 닫히거나 브라우저가 직접 닫힐 때만 제거될 수 있습니다.
window.open을 사용하여 페이지를 열고 localtion.href 메소드를 변경하면 sessionStorage 내부의 데이터를 얻을 수 있습니다.
위 두 가지 방법을 테스트한 결과 실제로 그렇습니다. 관심 있는 학생들은 실제로 결과를 테스트해 볼 수 있습니다. localStorage와 sessionStorage의 차이점을 요약하지는 않겠습니다.
간단히 말하면, 사용시 위에서 언급한 사항들에 주의를 기울이시면 사용시 불필요한 많은 함정을 피할 수 있습니다.
더 많은 관련 지식을 알고 싶으시다면 PHP 중국어 홈페이지를 방문해주세요! !
위 내용은 sessionStorage와 localStorage의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
