localStorage和sessionStorage本地缓存_如果localstorage不清除-优快云博客

本文详细介绍了前端本地存储的两种方式——localStorage和sessionStorage，包括它们的基本使用方法，如存取删数据，以及如何处理JSON数据。localStorage提供持久化的数据存储，即使浏览器关闭依然存在，而sessionStorage则在会话窗口关闭后数据消失。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.localStorage

localStorage ：是一种如果你不主动去清除，会一直将数据存储在客户端的储存方式，即使关闭了浏览器，下次打开的时候仍然可以看到之前存储的未主动清除的数据（即便是杀毒软件或者浏览器自带的清除功能，也不能将localStorage存储的数据清除掉）

1.基本写法：

<1>.localStorage 存数据：

 <input type="text">
    <button>存</button>
    <button>取</button>
    <script>
        var btn = document.querySelectorAll('button')
        var input = document.querySelector('input')
        btn[0].addEventListener('click', () => {
            var data = input.value
            localStorage.setItem('userData', data)
        })
    </script>

<2>.localStorage 取数据：

 var btn = document.querySelectorAll('button')
        var input = document.querySelector('input')
      
        btn[1].addEventListener('click', () => {
            var data = localStorage.getItem('userData');
            input.value = data;
        })

<3>.localStorage 删数据：

删除数据的方法有两个，一个是从浏览器端删除；一个是代码删除

<input type="text">
    <button>存</button>
    <button>取</button>
    <button>删</button>
    <script>
        var btn = document.querySelectorAll('button')
        var input = document.querySelector('input')
       /*  btn[0].addEventListener('click', () => {
            var data = input.value
            localStorage.setItem('userData', data)
        }) */
        /*  btn[1].addEventListener('click', () => {
             var data = localStorage.getItem('userData')
             input.value = data;
         }) */
        btn[2].addEventListener('click', () => {
            console.log(1);
            localStorage.removeItem('userData')
        })
    </script>

2.sessionStorage

sessionStorage：临时的会话存储，只要当前的会话窗口未关闭，存储的信息就不会丢失，即便刷新了页面或者在编辑器中更改了代码，存储的会话信息也不会丢失。

1.基本写法：

<1>.sessionStorage存数据：

<input type="text">
    <button>存</button>
    <button>取</button>
    <script>
        var btn = document.querySelectorAll('button')
        var input = document.querySelector('input')
        btn[0].addEventListener('click', () => {
            var data = input.value
            sessionStorage.setItem('userData', data)
        })
    </script>

<2>.sessionStorage取数据：

var btn = document.querySelectorAll('button')
        var input = document.querySelector('input')
      
        btn[1].addEventListener('click', () => {
            var data = sessionStorage.getItem('userData');
            input.value = data;
        })

<3>.localStorage 删数据：

删除数据的方法有两个，一个是从浏览器端删除；一个是代码删除

<input type="text">
    <button>存</button>
    <button>取</button>
    <button>删</button>
    <script>
        var btn = document.querySelectorAll('button')
        var input = document.querySelector('input')
       /*  btn[0].addEventListener('click', () => {
            var data = input.value
            sessionStorage.setItem('userData', data)
        }) */
        /*  btn[1].addEventListener('click', () => {
             var data = sessionStorage.getItem('userData')
             input.value = data;
         }) */
        btn[2].addEventListener('click', () => {
            console.log(1);
            sessionStorage.removeItem('userData')
        })
    </script>

3.本地存储进阶

<1> .JSON.parse : 如果从服务端接收的是数组的 JSON 数据，则 JSON.parse 会将其转换为 JavaScript 数组。

<2> .JSON.stringify : 我们也可以将 JavaScript 数组转换为 JSON 字符串：

<input type="text">
var btn = document.querySelectorAll('button')
        var input = document.querySelector('input')
        var arr = [];
        btn[0].addEventListener('click', () => {
            var data = {
                'User': input.value
            }
            arr.push(data)
            localStorage.setItem('userData', JSON.stringify(arr))
        })
    </script>