什么是本地存储。

神秘的张某人.

于 2024-04-20 10:42:22 发布

阅读量2.7k

点赞数 32

文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/zhang_mou_r/article/details/137987978

版权

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

文章目录

什么是本地存储
一、本地存储的特性及两种方式
二、.localStorage
- 使用方法
- storage事件
.sessionStorage
- 使用方法
sessionStorage和localStorage的区别**

什么是本地存储

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

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

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

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',....)

只有在数据的内容确实发生改变的时候，才会触发 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。