前端祖传三件套HTML的HTML5之Web存储 localStorage/sessionStorage

HTML5 Web 存储——localStorage/sessionStorage

localStorage

localStorage 允许我们在客户端存储数据，并在同一域名下的所有页面中共享这些数据。存储的数据将一直存在，即使用户关闭浏览器也是如此。下面是一个简单的例子：

!DOCTYPE html>
    
html>
    
head>
    
    title>
    LocalStorage Example/title>
    
/head>
    
body>
    
    h1>
    LocalStorage Example/h1>
    
    input type="text" id="name" placeholder="Enter your name">
    
    button onclick="saveName()">
    Save Name/button>
    
    script>

        function saveName() {
    
            var name = document.getElementById('name').value;
    
            localStorage.setItem('name', name);
    
            alert('Name saved successfully!');

        }
    
    /script>
    
/body>
    
/html>
    

在这个例子中，我们使用 localStorage.setItem() 方法将用户输入的名称存储在本地存储中。可以在另一个页面或者刷新页面后使用 localStorage.getItem() 来检索存储的数据。

var name = localStorage.getItem('name');
    

sessionStorage

sessionStorage 与 localStorage 类似，但有一个主要区别：存储在 sessionStorage 中的数据仅在当前会话期间可用。当用户关闭浏览器标签页或浏览器窗口时，存储在 sessionStorage 中的数据将被删除。下面是一个简单的例子：

!DOCTYPE html>
    
html>
    
head>
    
    title>
    SessionStorage Example/title>
    
/head>
    
body>
    
    h1>
    SessionStorage Example/h1>
    
    input type="text" id="name" placeholder="Enter your name">
    
    button onclick="saveName()">
    Save Name/button>
    
    script>

        function saveName() {
    
            var name = document.getElementById('name').value;
    
            sessionStorage.setItem('name', name);
    
            alert('Name saved successfully!');

        }
    
    /script>
    
/body>
    
/html>
    

在这个例子中，我们使用 sessionStorage.setItem() 方法将用户输入的名称存储在 sessionStorage 中。可以在同一会话期间的另一个页面或者刷新页面后使用 sessionStorage.getItem() 来检索存储的数据。

var name = sessionStorage.getItem('name');
    

总结

localStorage 和 sessionStorage 都允许我们在客户端（浏览器）中存储数据。localStorage 适用于需要持久保存数据的情况，而 sessionStorage 则适用于在同一会话期间共享数据的情况。

但是，我们应该注意到，与传统的 Cookie 相比，Web 存储具有更好的性能和安全性。它们还提供了更大的存储容量，因此我们可以使用 Web 存储来存储更多的数据

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！