세션 저장의 신비한 기능 발견: 숨겨진 용도 발견-HTML 튜토리얼-php.cn

세션 저장의 신비한 기능 발견: 숨겨진 용도 발견

WBOY

풀어 주다： 2024-01-13 12:36:06

원래의

826명이 탐색했습니다.

세션 저장의 신비한 기능 발견: 숨겨진 용도 발견

sessionStorage의 비밀 기능 공개: 숨겨진 용도를 이해하려면 구체적인 코드 예제가 필요합니다

소개:
웹 개발에서 우리는 종종 localStorage를 사용하여 데이터를 저장하지만 비슷한 API가 있다는 것을 알고 계셨나요? sessionStorage에 대해? sessionStorage와 localStorage는 매우 유사하지만 몇 가지 기능적 차이가 있습니다. 이 기사에서는 sessionStorage의 숨겨진 용도를 공개하고 특정 코드 예제를 통해 해당 기능과 사용법을 더 잘 이해하는 데 도움을 줍니다.

세션스토리지란 무엇인가요?
sessionStorage는 Web Storage API의 일부이며 웹 브라우저에 세션 수준 데이터를 저장하는 데 사용됩니다. 이는 임시 저장 메커니즘입니다. 데이터는 현재 세션 동안에만 유효하며 세션이 끝나면 데이터가 자동으로 지워집니다. 따라서 웹페이지를 새로 고치거나 다시 열 때 데이터를 유지해야 하는 경우 sessionStorage 대신 localStorage를 사용해야 합니다.

숨겨진 용도: 데이터 공유
sessionStorage는 현재 페이지에만 국한되지 않고, 동일한 브라우저에서 서로 다른 페이지 간에 데이터를 공유할 수도 있습니다. 이는 여러 페이지에 걸친 데이터 통신이 필요한 애플리케이션에 유용합니다. 다음은 이 사용법을 설명하기 위해 특정 코드 예제를 사용합니다.

HTML 코드:

<!DOCTYPE html>
<html>
<body>
   <input type="text" id="inputValue" />
   <button onclick="saveData()">保存数据</button>
   <button onclick="loadData()">加载数据</button>
</body>
</html>

로그인 후 복사

JavaScript 코드:

function saveData() {
   var inputValue = document.getElementById('inputValue').value;
   sessionStorage.setItem('data', inputValue);
   location.href = "//m.sbmmt.com/link/e05c7ba4e087beea9410929698dc41a6";
}

function loadData() {
   var data = sessionStorage.getItem('data');
   alert(data);
}

로그인 후 복사

위 코드에는 "데이터 저장"을 클릭하면 입력 상자와 두 개의 버튼이 있습니다. 버튼을 누르면 입력 상자의 값이 sessionStorage에 저장되고 다른 페이지(//m.sbmmt.com/link/e05c7ba4e087beea9410929698dc41a6)로 이동합니다. //m.sbmmt.com/link/e05c7ba4e087beea9410929698dc41a6 페이지에서 "데이터 로드" 버튼을 클릭하면 첫 번째 페이지에 저장된 데이터가 sessionStorage에서 읽어져 팝업으로 표시됩니다.

숨겨진 사용 2개: 페이지 매개변수 전달
데이터 공유 외에도 sessionStorage를 매개변수 전달 방법으로 사용할 수도 있습니다. 일반적으로 우리는 URL의 쿼리 매개변수를 사용하여 매개변수를 전달하지만 이렇게 하면 매개변수 값이 노출됩니다. sessionStorage를 사용하여 매개변수를 전달하면 보다 유연하고 편리하면서도 데이터 보안을 보장할 수 있습니다. 다음 코드 예는 sessionStorage를 사용하여 매개변수를 전달하는 방법을 보여줍니다.

HTML 코드:

<!DOCTYPE html>
<html>
<body>
   <a href="//m.sbmmt.com/link/e05c7ba4e087beea9410929698dc41a6">页面跳转</a>
</body>
</html>

로그인 후 복사

JavaScript 코드:

var params = {
   name: 'Jack',
   age: 20
};
sessionStorage.setItem('params', JSON.stringify(params));

로그인 후 복사

위 코드에서 "Page Jump"를 클릭하면 이름과 나이가 모두 포함된 페이지가 표시됩니다. 매개변수의 객체 매개변수는 JSON 문자열 형식으로 sessionStorage에 저장됩니다. //m.sbmmt.com/link/e05c7ba4e087beea9410929698dc41a6 페이지에서 매개변수는 다음과 같은 방법으로 읽을 수 있습니다.

JavaScript 코드:

var params = JSON.parse(sessionStorage.getItem('params'));
console.log(params.name); // 输出：Jack
console.log(params.age); // 输出：20

로그인 후 복사

sessionStorage를 사용하여 매개변수를 전달하면 보안을 더 잘 보호할 수 있습니다. 매개 변수 및 데이터 전송 효율성과 유연성을 고려합니다.

결론:
이 기사에서는 sessionStorage의 두 가지 숨겨진 용도인 데이터 및 페이지 매개변수 공유를 밝히고 코드 예제를 통해 자세히 설명합니다. sessionStorage의 사용 시나리오는 상대적으로 좁지만 특정 애플리케이션 시나리오에서는 큰 도움이 될 수 있습니다. 이 기사가 sessionStorage를 더 잘 이해하고 사용하며 웹 개발 능력을 지속적으로 향상시키는 데 도움이 되기를 바랍니다.

위 내용은 세션 저장의 신비한 기능 발견: 숨겨진 용도 발견의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!