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 객체로 변환합니다. 메서드를 만들고 로컬 저장소에 저장하고 마지막으로 경고 상자에 개체를 가져옵니다. 출력 참조:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook