什么是本地存储。

什么是本地存储。本地存储是指将数据保存在用户的本地设备上 以供后续使用和访问

大家好,欢迎来到IT知识分享网。

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


什么是本地存储

本地存储是指将数据保存在用户的本地设备上,以供后续使用和访问。通过本地存储,网页和应用程序可以在用户关闭浏览器或重新打开页面后仍能保留之前保存的数据。

提示:以下是本篇文章正文内容,下面案例可供参考

一、本地存储的特性及两种方式

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

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

2.本地存储的两种方式
.localStorage本地永久存储
.sessionStorage临时性存储

二、.localStorage

localStorage为永久性保存数据,不会随着浏览器的关闭而消失,可以在同域名跨页访问

使用方法

1>存数据
localStorage.setItem()

2>取数据
localStorage.getItem();

只能存储字符串,如果传递的不是字符串,会被隐式转换成字符串。所以经常在本地存储json字符串
代码如下(示例):
在这里插入图片描述
在这里插入图片描述
3>改数据
localStorage.setItem() 此键名已经存在

4>删除数据
localStorage.removeItem()
删除对应键名内容
localStorage.clear()
清空本地当前域名下的所有存储
下面展示一些 内联代码片











<body> <button id="btn">存储</button> <button id="btn1">获取</button> <button id="btn2">删除</button> <button id="btn3">获取所有的本地存储数据</button> </body> <script> btn.onclick = function(){ 
     localStorage.setItem('count',10); } btn1.onclick = function(){ 
     var res = localStorage.getItem('chatRecord'); console.log(res) } btn2.onclick = function(){ 
     // localStorage.removeItem('msg') localStorage.clear() } btn3.onclick = function(){ 
     var arr = [] for(var i = 0;i<localStorage.length;i++){ 
     var keyname = localStorage.key(i); arr.push ( localStorage.getItem(keyname) ) } console.log(arr) } </script> </html> 

补充 _
localStorage.key(索引) 获取对应索引位置的键名
localStorage.length 获取本地存储的所有数据的长度

storage事件

当storage改变之后,会触发storage事件! window.addEventListener('storage',....) 

.sessionStorage

sessionStorage是临时性存储,在页面未关闭以前都不会消失。并且,sessionStorage不能夸页面访问!

使用方法

数据的特性:
sessionStorage.setItem( ):存储数据

sessionStorage.getItem ():获取数据

sessionStorage.removeItem ():删除数据

sessionStorage.clear ():删除所有数据

使用方法跟localStorage一模一样

sessionStorage和localStorage的区别

存储容量:(不同浏览器可能有所不同)
每个域名下sessionStorage和localStorage的大小限制通常在5MB至10MB之间。
生命周期:
sessionStorage:数据在同一个会话(页面关闭前)中一直存在,关闭浏览器标签或窗口后会被清除。
localStorage:数据会一直存在,除非被显式删除或浏览器清除缓存。
作用域:
sessionStorage:数据仅限于同一个窗口或同一个标签页中,不同窗口或标签页之间的数据不共享。
localStorage:数据在同一个域名下共享,不同窗口或标签页之间的数据可以共享。






根据以上的区别,可以根据具体的需求选择合适的存储方式。如果仅在页面会话期间保存临时数据,可以使用sessionStorage;如果需要长期保存数据或在不同页面共享数据,可以使用localStorage。

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/111228.html

(0)
上一篇 2026-01-26 10:27
下一篇 2026-01-26 10:45

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信