【JavaScript】本地存储数据

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、JS本地存储

JavaScript提供了两种主要的本地存储方式：localStorage和sessionStorage

二、使用本地存储

1.本地存储之sessionStorage

sessionStorage生命周期为关闭浏览器窗口，在同一窗口下数据可以共享，以键值对的形式存储，只能存储字符串类型的数据，一旦用户关闭包含 sessionStorage 数据的浏览器窗口，所有存储的数据都将被销毁，下次打开同一页面时无法再访问这些数据。
代码如下（示例）：

set.addEventListener('click', function () {
            // 点击之后，储存表单的值
            let val = ipt.value;
            sessionStorage.setItem('uname', val);
            sessionStorage.setItem('pwd', val);
        })
get.addEventListener('click', function () {
            // 点击之后，获取表单的值
            let value = sessionStorage.getItem('uname');
            alert(value);
        })
remove.addEventListener('click', function () {
            // 点击之后，删除表单的值
            sessionStorage.removeItem('uname');
        })
del.addEventListener('click', function () {
            // 点击之后，删除所有值
            sessionStorage.clear();
        })   

游览器按下F12，在应用程序-会话存储中可以看到存储的数据

1.本地存储之localStorage

localStorage允许 web 应用程序在用户的浏览器中存储持久化的数据，即使在浏览器关闭后重新打开，数据仍然存在，只能存储字符串类型的数据。它的生命周期是“永久”的，需要在游览器手动清除，或者在代码中删除数据。
代码如下（示例）：

set.addEventListener('click', function () {
            let val = ipt.value;
            localStorage.setItem('uname', val);
        })
get.addEventListener('click', function () {
            let value = localStorage.getItem('uname');
            alert(value);
        })
remove.addEventListener('click', function () {
            localStorage.removeItem('uname');
        })
del.addEventListener('click', function () {
            localStorage.clear();
        })

游览器按下F12，在应用程序-本地存储中可以看到存储的数据