JavaScript 本地存储 localStorage 教程

localStorage 介绍

localStorage是浏览器提供的键值对存储机制，数据以字符串形式永久保存，除非手动清除。

（但可以用一些手法令他能够定期清除，但这个涉及到某些机制，会使运行效率大减不建议）

注意点：

• localStorage只能存储字符串类型的数据，其他数据类型如数字、布尔值、对象等都会被自动转换为字符串存储。
• localStorage存储的数据格式是字符串。虽然你可以存储JSON格式的数据，但需要先使用 JSON.stringify() 将其转换为字符串，读取时再用 JSON.parse() 转换回来。

1.存储数据

localStorage.setItem('myData', '这是存储在本地存储中的数据');

2.获取数据

localStorage.getItem('myData');

3.删除数据

localStorage.removeItem('myData');

4.清空所有数据

localStorage.clear();

5.完整代码演示

Html：

     <button>点击我本地存储</button>
     <button>获取本地存储</button>
     <button>删除本地存储</button>
     <button>清空所有存储</button>

JavaScript：

    // 存储数据到本地存储
    document.querySelector('button:nth-child(1)').addEventListener('click', () => {
        localStorage.setItem('myData', '这是存储在本地存储中的数据');
        alert('数据已存储到本地存储');
    });
    
    // 从本地存储获取数据
    document.querySelector('button:nth-child(2)').addEventListener('click', () => {
        const data = localStorage.getItem('myData');
        if(data) {
            alert('从本地存储获取的数据: ' + data);
        } else {
            alert('本地存储中没有数据');
        }
    });

    // 删除本地存储数据
    document.querySelector('button:nth-child(3)').addEventListener('click', () => {
        localStorage.removeItem('myData');
        alert('已删除本地存储数据');
    });
    
    // 清空所有本地存储
    document.querySelector('button:nth-child(4)').addEventListener('click', () => {
        localStorage.clear();
        alert('已清空所有本地存储数据');
    });