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 オブジェクトに変換します。メソッドを作成してローカルストレージに保存し、最後にアラートボックスでオブジェクトを取得します。出力を参照してください：
