2024年最新本地存储 总结【一篇文章拿捏】，2024年最新大厂程序员面试题

自学几个月前端，为什么感觉什么都没学到？？

---

这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。

最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。

很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。

这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。

但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。

所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。

     })

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

---

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

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

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

window.localStorage.getItem(‘id’);

     })

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

        window.localStorage.removeItem('id');

     })

 </script>

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

[外链图片转存中…(img-jAmlT090-1715754002558)]