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

• 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)：

---

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

 <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>

---

sessionStorage.getItem (key)：

---

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

 <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>

---

sessionStorage.removeItem (key)：

---

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

 <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>

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

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

---

sessionStorage.clear ()：

---

清除所有数据

 <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>

我们先存入两个数据：

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

---

二：window.localStorage

===========================

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

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

• localStorage.setItem (key, value)：存储数据

• localStorage.getItem (key)：获取数据

• localStorage.removeItem (key)：删除数据

• localStorage.clear ()：删除所有数据

---

localStorage.setItem (key, value)：

---

存储数据，由于其生命周期为永久，所以即使关闭浏览器，再打开也会存在此数据

<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>

---

localStorage.getItem (key)：

---

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

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

前端面试题汇总

---

前端面试题是我面试过程中遇到的面试题，每一次面试后我都会复盘总结。我做了一个整理，并且在技术博客找到了专业的解答，大家可以参考下：

由于篇幅有限，只能分享部分面试题，完整版面试题及答案可以【点击我】阅读下载哦~

感悟

且在技术博客找到了专业的解答，大家可以参考下：

由于篇幅有限，只能分享部分面试题，完整版面试题及答案可以【点击我】阅读下载哦~

感悟

春招面试的后期，运气和实力都很重要，自己也是运气比较好，为了回馈粉丝朋友们（毕竟自己也玩了这么久哈哈哈），整理个人感悟和总结以上。最后祝愿大家能够收获理想offer！！