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

---

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

---

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

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

---

localStorage.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.localStorage.setItem('id',text.value);

     })

     btnget.addEventListener('click',function(){  //获取数据

        text.value= window.localStorage.getItem('id');

     })

     btnremove.addEventListener('click',function(){  //获取数据

        window.localStorage.removeItem('id');

     })

 </script>

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

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

---

localStorage.clear ()：

---

清除所有数据

 <input type="text">

 <button class="set">存储数据</button>

 <button class="get">获取数据</button>

 <button class="remove">删除数据</button>

 <button class="clear">删除所有数据</button>

 <script>

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

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

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

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

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

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

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽

-J4WyMHsA-1712767439566)]

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

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

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽

资料领取方式：戳这里获取