浏览器本地存储&&临时存储&&webStorage

已于 2022-09-04 12:27:36 修改
阅读量583 收藏 38
点赞数 63
分类专栏： vue2&vue3 文章标签： javascript 前端 html
于 2022-09-04 12:24:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52385631/article/details/126687847
版权

localStorage sessionStorage Web Storage 数据存储 JavaScript
关键词由CSDN通过智能技术生成

1. localStorage

1.1 介绍

1.sessionStorage(临时存储)：为没一个数据维持一个存储区域，浏览器打开会创建，关闭浏览器就会消失。
2.localStorage(长期存储)：和前者一样，区别在于浏览器关闭后数据依然存在。

1.2 使用

放值：
localStorage.setItem('msg','hello!!!')

取值：

console.log(localStorage.getItem('msg'))

删除：

localStorage.removeItem('msg2')

全部清掉：

localStorage.clear()

1.3 代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>localStorage</title>
	</head>
	<body>
		<h2>localStorage</h2>
		<button onclick="saveData()">点我保存一个数据</button>
		<button onclick="readData()">点我读取一个数据</button>
		<button onclick="deleteData()">点我删除一个数据</button>
		<button onclick="deleteAllData()">点我清空一个数据</button>

		<script type="text/javascript" >
			let p = {name:'张三',age:18}

			function saveData(){
				localStorage.setItem('msg','hello!!!')
				localStorage.setItem('msg2',666)
				localStorage.setItem('person',JSON.stringify(p))
			}
			function readData(){
				console.log(localStorage.getItem('msg'))
				console.log(localStorage.getItem('msg2'))

				const result = localStorage.getItem('person')
				console.log(JSON.parse(result))

				// console.log(localStorage.getItem('msg3'))
			}
			function deleteData(){
				localStorage.removeItem('msg2')
			}
			function deleteAllData(){
				localStorage.clear()
			}
		</script>
	</body>
</html>

2.sessionStorage

2.1 使用

放值：

sessionStorage.setItem('msg','hello!!!')

取值：

sessionStorage.log(localStorage.getItem('msg'))

删除：

sessionStorage.removeItem('msg2')

全部清掉：

sessionStorage.clear()

2.2 代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>sessionStorage</title>
	</head>
	<body>
		<h2>sessionStorage</h2>
		<button onclick="saveData()">点我保存一个数据</button>
		<button onclick="readData()">点我读取一个数据</button>
		<button onclick="deleteData()">点我删除一个数据</button>
		<button onclick="deleteAllData()">点我清空一个数据</button>

		<script type="text/javascript" >
			let p = {name:'张三',age:18}

			function saveData(){
				sessionStorage.setItem('msg','hello!!!')
				sessionStorage.setItem('msg2',666)
				sessionStorage.setItem('person',JSON.stringify(p))
			}
			function readData(){
				console.log(sessionStorage.getItem('msg'))
				console.log(sessionStorage.getItem('msg2'))

				const result = sessionStorage.getItem('person')
				console.log(JSON.parse(result))

				// console.log(sessionStorage.getItem('msg3'))
			}
			function deleteData(){
				sessionStorage.removeItem('msg2')
			}
			function deleteAllData(){
				sessionStorage.clear()
			}
		</script>
	</body>
</html>

 3. webStorage

3.1 介绍

  1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

  2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

  3. 相关API：

    1. xxxxxStorage.setItem('key', 'value'); 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

    2. xxxxxStorage.getItem('person');

      该方法接受一个键名作为参数，返回键名对应的值。

    3. xxxxxStorage.removeItem('key');

      该方法接受一个键名作为参数，并把该键名从存储中删除。

    4. xxxxxStorage.clear()

      该方法会清空存储中的所有数据。

  4. 备注：

    1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。

    2. LocalStorage存储的内容，需要手动清除才会消失。

    3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。

    4. JSON.parse(null)的结果依然是null。

3.2 代码示例

3.2.1 保存

保存到localStorage，如果保存的是个对象，那么需要把数据转换为JSON格式，字符则不需要

/*保存*/
/*对象*/
var user = {
	name : 'admin',
	password: 'password'
}
/*字符*/
var str = 'hello';

localStorage.setItem("user",JSON.stringify(user)); //需要先转换为JSON

localStorage.setItem("hello",JSON.stringify(str));

 3.2.2 获取

/*对象*/
var user = localStorage.getItem("user"); //现在user是一个字符串
//如果需要读取user中对象则需要把user转换为一个对象
user = JSON.parse(user);
name = user.name

 3.2.3 删除

/*指定删除*/
localStorage.remove("user");
/*全部删除*/
localStorage.clear();

骑猪去兜风z1
关注
专栏目录
js之浏览器本地存储webstorage
我心坚持
02-14 1442
、、、、、、、、、、、仅对以前所学做复习记录使用、、、、、、、、、 webstorage分为两个存储：localStorage和sessionStorage。 存储大小根据浏览器的不同，容量也不同，一般是5M左右。 是window自带的语法，以键值对的形式存储。 一、localStorage： locaStorage名字叫本地存储，能够长久的保存你的本地数据，有四个API，setItem\getItem\removeItem\clear 1、setItem：设置数据 <body> <di
WebStorage浏览器的本地存储
m0_58151273的博客
02-02 695
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>L.
js中的本地存储（webStorage）
李公子的博客
08-05 934
webStorage （Window.sessionStorage和Window.localStorage） 1.存储内容大小一般支持5MB左右（不同浏览器可能还不一样） 2.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。 3.相关API： 1.```xxxxxStorage.setItem('key','value');``` 该方法接受一个键...
js--web Storage
Zxiaoling的博客
03-23 203
storage接口用于在浏览器客户端中存储用户自定义的信息。storage的存储形式：1.localStorage:永久的存储在浏览器中，但是要注意，在不同的浏览器中数据是不能共享的。2.SessionStorage:当前页面回话基本的存储，当浏览器关闭或页面关闭时，数据就会丢失。3.GlobalStorage:HTML 5中被localStorage代替。为了能访问到同一个localStorag...
浏览器存储(cookie、localStorage、sessionStorage)
weixin_30598225的博客
05-10 251
互联网早期浏览器是没有状态维护，这个就导致一个问题就是服务器不知道浏览器的状态，无法判断是否是同一个浏览器。这样用户登录、购物车功能都无法实现，Lou Montulli在1994年引入到web中最终纳入W3C规范 RFC6265中。 区别 cookie在浏览器请求中每次都会附加请求头中发送给服务器。用户代理(一般值浏览器)所实现的大小最少要到达4096字节(感谢@lulianqi15的指正) ...
js-WebStorage（localStorage，sessionStorage）
weixin_47790139的博客
05-30 514
文章目录WebStorageWebStorage概述WebStorage分类localStorage使用sessionStorage使用 WebStorage WebStorage概述 WebStorage是HTML5中本地存储的解决方案之一，在HTML5的WebStorage概念引入之前除去IE User Data、Flash Cookie、Google Gears等看名字就不靠谱的解决方案，浏览器兼容的本地存储方案只有使用Cookie。有同学可能会问，既然有了Cookie本地存储，为什么还要引入WebS
Android应用源码-浏览器&WebView&JS&HTML5类源代码（8例）.zip
10-22
4. **HTML5技术**：HTML5是超文本标记语言的最新版本，为移动应用开发提供了更强大的功能，如离线存储（Web Storage）、多媒体播放（Audio/Video标签）、地理定位（Geolocation API）和Canvas绘图等。在Android的...
HTML5本地存储之Web Storage详解
09-28
无论是用于临时存储用户状态，还是长期保存用户配置，Web Storage都是现代Web应用不可或缺的一部分。由于其广泛支持和强大功能，Web Storage已经成为了提升用户体验和优化应用程序性能的有效工具。
JavaScript Web Storage 详解
最新发布
jyn15159的博客
03-06 349
Web Storage 定义了两个对象用于存储数据：sessionStorage 和 localStorage。sessionStorage 用于严格保存浏览器一次会话期间的数据，因为数据会在浏览器关闭时被删除。localStorage 用于会话之外持久保存数据。
JavaScript学习——WebStorage
hellobupt的博客
07-13 340
    Cookie可以实现客户端存储少量数据的功能，但是每个网站只能存储4KB数据，使用Web Storage可以存储1~5MB。Cookie在每次处理网页请求的时候都会连带发送到服务器端，安全性低。但是他们都是以key-value键值对保存数据的。不同的Web Storage类型类型生命周期有效范围localStorage执行删除命令才会消失同一网站的网页可以跨窗口和分页sessionStor...
本地储存和临时储存
weixin_46174967的博客
02-03 501
localStorage : 永久存储(相对)，其中的数据不随着浏览器的开关而改变 sessionStorage： 临时存储(相对), 当浏览器关闭时，数据消失(页面刷新时，不会受到影响) 使用之前看看是否支持本地储存 var ipt = document.getElementsByClassName("ipt")[0]; var but = document.ge...
JavaScript之web Storage事件机制
HNUYSY的博客
07-06 543
对本地Storage中数据的操作(修改、删除)进行监听，并且可以根据监听结果给出相应的处理 语法： window.addEventListener(“storage”,doReaction,flag); “storage”：表示对Storage（包括session和local）进行监听 doReaction：自定义函数，事件发生时回调，会接收一个StorageEvent类型的参数，包括storageArea、key（发生变化的key）、oldValue（原值）、newValue（新值）、url（引发变化的U
临时存存储页面上的数据---Web存储
weixin_34204722的博客
08-22 212
HTML5 Web存储的两种方法使用 localStorage和sessionStorage 参考： http://www.cnblogs.com/taoweiji/archive/2012/12/08/2808997.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l...
js Storage 本地存储用法 LocalStorage SessionStorage
学习笔记
02-21 1469
js LocalStorage SessionStorage 客户端存储小型数据的方式有 cookie 和 storage 两种 这两种存储方式都是基于站点的，也就是说不同的站点有不同的cookie cookie 用于存储小的数据，如 username email uuid token等，并可以设置数据的过期时间 storage 可以永久存储数据，并可以用于存储相对大一些的数据，一般认为可以...
一个简单的存取cookie的小例子以及本地存储和临时存储
beLaity的博客
06-10 423
一个简单的存取cookie的小例子 function setCookie(key, val, expires) { //存cookie值 if (typeof val === "object") val = JSON.stringify(val) let now1 = new Date() let checkdate = new Date(now1) checkdate.setD
本地浏览器缓存sessionStorage（临时存储） localStorage（长期存储）的使用
weixin_33670713的博客
05-30 316
对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载 localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器...
html5中的localStorage 临时存储
weixin_45439010的博客
11-03 525
localStorage 临时存储 localStorage 用于长久保存整个网站的数据， 只支持 string 类型的存储，容量一般在2-5Mb左右，保存的数据没有过期时间，直到手动去删除. 而sessionStorage在网页回话结束时失效，刷新时不会失效 setItem 设置存储内容 getItem 得到存储内容 removeItem 删除存储内容（一条） clea 清除存储内容（所有） length 获取存储内容个数） 存储容量超过限制时，会抛出QuotaExceed
临时存储与本地存储的区别与 存储对象时的注意事项
Dzb1993的博客
03-03 1441
1.sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。 2.localStorage：将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。 sessionStorage:临时存储，当浏览器关闭后 ，存储的数据也
评论 102
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

骑猪去兜风z1

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值