本地存储总结【一篇文章拿捏】

卡卡西最近怎么样

已于 2022-04-28 15:49:26 修改

阅读量1k

点赞数 28

分类专栏： JavaScript 零基础入门文章标签：前端 javascript css html 开发语言

于 2022-04-03 15:51:11 首次发布

本文链接：https://blog.csdn.net/weixin_52212950/article/details/123937166

版权

JavaScript 零基础入门专栏收录该内容

80 篇文章 43 订阅

订阅专栏

本文详细介绍了浏览器本地存储的两种方式——sessionStorage和localStorage，它们的区别在于生命周期、共享范围及操作特性。通过实例演示了如何使用这两种存储方式来保存、获取和管理数据。

摘要由CSDN通过智能技术生成

什么是本地存储呢？我们平常保存东西或者需要经过数据库，服务器，将数据存到数据库中，但有些时候我们要保存的数据没有必要存到数据库中，比如我们在网页输入的内容，我们想要刷新页面也不会清楚数据，这时本地存储就有了其价值

本地存储主要有以下几种特性：

数据存在浏览器中
读取方便
页面刷新不会丢失数据
只能存储字符串

这篇文章我们主要研究本地存储的两种方式：

window.sessionStorage
window.localStorage

（ window 可省略）

一：window.sessionStorage

在开始讲解此方式前，我们先说明一个名词 ------- 生命周期，所谓生命周期，就是从创建到销毁经历的过程，window.sessionStorage 的生命周期就是关闭浏览器窗口就可将其销毁。

其特点如下：生命周期为关闭浏览器窗口，仅可同一页面可共享数据，以键值对的形式存储

数据的特性不过是增删查改：

sessionStorage.setItem (key, value)：存储数据
sessionStorage.getItem (key)：获取数据
sessionStorage.removeItem (key)：删除数据
sessionStorage.clear ()：删除所有数据

sessionStorage.setItem (key, value)：

用于存储数据，以键值对的方式存入浏览器

<body>
     <input type="text">
     <button>存储数据</button>
     <script>
         var text=document.querySelector('input');
         var btn=document.querySelector('button');
         btn.addEventListener('click',function(){
             window.sessionStorage.setItem('id',text.value)
         })
     </script>
</body>

sessionStorage.getItem (key)：

用于获取数据，此处将存储的值给了文本框，让其重新显示

<body>
     <input type="text">
     <button class="set">存储数据</button>
     <button class="get">获取数据</button>
     <script>
         var text=document.querySelector('input');
         var btnset=document.querySelector('.set');
         var btnget=document.querySelector('.get');
         btnset.addEventListener('click',function(){  //存储数据
             window.sessionStorage.setItem('id',text.value);
         })
         btnget.addEventListener('click',function(){  //获取数据
            text.value= window.sessionStorage.getItem('id');
         })
     </script>
</body>

sessionStorage.removeItem (key)：

用于删除存储的数据，一次只能删一个指定键的数据

<body>
     <input type="text">
     <button class="set">存储数据</button>
     <button class="get">获取数据</button>
     <button class="remove">删除数据</button>
     <script>
         var text=document.querySelector('input');
         var btnset=document.querySelector('.set');
         var btnget=document.querySelector('.get');
         var btnremove=document.querySelector('.remove');
         btnset.addEventListener('click',function(){  //存储数据
             window.sessionStorage.setItem('id',text.value);
         })
         btnget.addEventListener('click',function(){  //获取数据
            text.value= window.sessionStorage.getItem('id');
         })
         btnremove.addEventListener('click',function(){  //获取数据
            window.sessionStorage.removeItem('id');
         })
     </script>
</body>

存储后数据存在了浏览器中：

删除后数据完完全全被删除，无法再次获取：

sessionStorage.clear ()：

清除所有数据

<body>
     <input type="text">
     <button class="set">存储数据</button>
     <button class="get">获取数据</button>
     <button class="remove">删除数据</button>
     <button class="clear">删除所有数据</button>
     <script>
         var text=document.querySelector('input');
         var btnset=document.querySelector('.set');
         var btnget=document.querySelector('.get');
         var btnremove=document.querySelector('.remove');
         var btnclear=document.querySelector('.clear');
         btnset.addEventListener('click',function(){  //存储数据
             window.sessionStorage.setItem('id',text.value);
             window.sessionStorage.setItem('pwd',text.value);
         })
         btnget.addEventListener('click',function(){  //获取数据
            text.value= window.sessionStorage.getItem('id');
         })
         btnremove.addEventListener('click',function(){  //获取数据
            window.sessionStorage.removeItem('id');
         })
         btnclear.addEventListener('click',function(){  //获取数据
            window.sessionStorage.clear();
         })
     </script>
</body>

我们先存入两个数据：

删除所有数据后数据消失：

二：window.localStorage

其特点如下：生命周期为永久生效的，关闭浏览器也会存在，除非手动删除，可以多个页面共享数据（同一个浏览器下），以键值对的形式存储

数据的特性增删查改和 sessionStorage 一样：

localStorage.setItem (key, value)：存储数据
localStorage.getItem (key)：获取数据
localStorage.removeItem (key)：删除数据
localStorage.clear ()：删除所有数据

localStorage.setItem (key, value)：

存储数据，由于其生命周期为永久，所以即使关闭浏览器，再打开也会存在此数据
<body>
    <input type="text">
    <button>存储数据</button>
    <script>
        var text=document.querySelector('input');
        var btn=document.querySelector('button');
        btn.addEventListener('click',function(){
            window.localStorage.setItem('id',text.value)
        })
    </script>
</body>

localStorage.getItem (key)：

用于获取数据，用法与上均相同

<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <script>
        var text=document.querySelector('input');
        var btnset=document.querySelector('.set');
        var btnget=document.querySelector('.get');
        btnset.addEventListener('click',function(){  //存储数据
            window.localStorage.setItem('id',text.value);
        })
        btnget.addEventListener('click',function(){  //获取数据
           text.value= window.localStorage.getItem('id');
        })
    </script>
</body>

localStorage.removeItem (key)：