HOWTO · jQuery
jQuery 로컬 스토리지
이 튜토리얼은 jQuery에서 로컬 스토리지를 사용하는 방법을 보여줍니다.
이 페이지의 내용
jQuery는 로컬 저장소와 함께 작동하는 내장 기능을 제공하지 않지만 jQuery 객체와 함께 JavaScript 로컬 저장소 방법을 사용할 수 있습니다. 이 튜토리얼은 jQuery와 함께 로컬 스토리지를 사용하는 방법을 보여줍니다.
jQuery 로컬 스토리지
JavaScript의 setItem() 및 getItem() 메서드는 로컬 저장소에서 데이터를 저장하고 가져오는 데 사용됩니다. 이 메서드를 사용하여 jQuery 객체를 로컬 저장소에 저장하고 로컬 저장소에서 객체를 가져올 수 있습니다. jQuery를 사용하는 이러한 메서드의 구문은 다음과 같습니다.
var html = $('element')[0].outerHTML;
localStorage.setItem('DemoContent', html);
localStorage.getItem('htmltest')
여기서 var html은 jQuery 개체를 JavaScript 개체로 변환하고 localStorage에 저장하고 마지막으로 localStorage에서 가져옵니다. DemoContent는 키이고 html 변수는 setItem 메서드.
jQuery에서 localStorage로 텍스트를 설정하고 가져오는 예제를 시도해 보겠습니다. 예를 참조하십시오.
<!DOCTYPE html>
<html>
<head>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<title>jQuery Local Storage</title>
</head>
<body>
<h1>Delftstack | The Best Tutorial Site</h1>
<p id="DemoPara1">This is paragraph 1</p>
<button id="DemoButton1"> Click Here</button>
<script type="text/javascript">
$(document).ready(function () {
$("#DemoButton1").click(function () {
var TextContent = $('#DemoPara1').text();
localStorage.setItem('textcontent', TextContent);
alert(localStorage.getItem('textcontent'));
});
});
</script>
</body>
</html>
위의 코드는 단락의 내용을 로컬 저장소로 설정하고 경고 상자에 가져옵니다. 출력 참조:
이제 jQuery를 사용하여 전체 HTML 객체를 localStorage로 설정하고 가져오도록 합시다. 예를 참조하십시오.
<!DOCTYPE html>
<html>
<head>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<title>jQuery Local Storage</title>
</head>
<body>
<h1>Delftstack | The Best Tutorial Site</h1>
<p id="DemoPara1">This is paragraph 1</p>
<button id="DemoButton1"> Click Here</button>
<script type="text/javascript">
$(document).ready(function () {
$("#DemoButton1").click(function () {
var HTMLContent = $('#DemoPara1')[0].outerHTML;
localStorage.setItem('htmlcontent', HTMLContent);
alert(localStorage.getItem('htmlcontent'));
});
});
</script>
</body>
</html>
위의 코드는 $('#DemoPara1')[0].outerHTML;을 사용하여 jQuery 객체를 JavaScript 객체로 변환합니다. 메서드를 만들고 로컬 저장소에 저장하고 마지막으로 경고 상자에 개체를 가져옵니다. 출력 참조:
