本地存储 jQuery入门

作者：System 时间：2024年08月14日分类：所有,jquery 字数：1503

在本地存储中使用jQuery可以通过几种方法来实现。以下是一个简单的例子，展示了如何使用jQuery来设置和获取本地存储数据。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LocalStorage jQuery Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            // 设置本地存储数据
            $('#set-storage').click(function(){
                var key = 'myKey';
                var value = 'myValue';
                localStorage.setItem(key, value);
            });
 
            // 获取本地存储数据
            $('#get-storage').click(function(){
                var key = 'myKey';
                var value = localStorage.getItem(key);
                alert('The value of ' + key + ' is ' + value);
            });
 
            // 清除本地存储数据
            $('#clear-storage').click(function(){
                localStorage.clear();
                alert('Local storage is cleared.');
            });
        });
    </script>
</head>
<body>
 
    <button id="set-storage">Set Item in LocalStorage</button>
    <button id="get-storage">Get Item from LocalStorage</button>
    <button id="clear-storage">Clear LocalStorage</button>
 
</body>
</html>

在这个例子中，我们使用jQuery的$(document).ready()函数来确保在DOM完全加载后才绑定事件处理器。当用户点击相应的按钮时，会执行相应的操作：

点击“Set Item in LocalStorage”按钮会触发一个事件，该事件使用jQuery设置一个键值对到本地存储。
点击“Get Item from LocalStorage”按钮会触发一个事件，该事件使用jQuery从本地存储中获取一个值并通过弹窗显示出来。
点击“Clear LocalStorage”按钮会触发一个事件，该事件使用jQuery清除本地存储中的所有数据。

本地存储 jQuery入门

评论已关闭

推荐阅读