前端JS学习笔记——本地存储

最新推荐文章于 2025-04-22 06:30:00 发布

zerocean_

最新推荐文章于 2025-04-22 06:30:00 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 javascript 学习

本文链接：https://blog.youkuaiyun.com/zerocean_/article/details/123417500

本文介绍了HTML5中用于本地存储的sessionStorage和localStorage特性，包括它们的存储容量、生命周期以及如何使用。sessionStorage数据在浏览器窗口关闭后消失，而localStorage则长期保存，即使关闭页面。两者都以键值对形式存储数据，但只支持字符串类型，对象需转换为JSON。文章提供了使用示例，并提到localStorage适用于记住用户名等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在HTML5之前浏览器存储数据一般只能存储在Cookie中，但是Cookie的限制是4096字节，这就要求网站存储的数据尽量精简，复杂的、关系型的用户数据就根本不可能存储了。

为了在本地存储大量数据，HTML5提出了新的本地存储技术sessionStorage和localStorage。

本地存储特性

数据存储在用户浏览器中
设置、读取方便、甚全页面刷新不丢失数据
容星较大，sessionStorage约5M、localStorage：约20M
只能存储字符串，可以将对象SON.stringify0编码后存储

一、sessionStorage会话级别的本地存储

sessionStorage特性：

生命周期为关闭浏览器窗口
在同一个窗口页面下数据可以共享
以键值对的形式存储使用

语法：

//存储数据
sessionStorage.setItem(key,value)
//获取数据
sessionStorage.getItem(key)
//删除数据
sessionStorage.removeItem(key)
//清楚所有数据
sessionStorage.clear() // ！谨慎使用

练习案例：

<--html-->
<input type="text" name="" id="uname" value="" placeholder="用户名"/ >
<input type="number" name="" id="age" value="" placeholder="年龄"/>
<button type="button" id="save">保存</button>
<button type="button" id='get'>登录</button>
<button type="button" id="clear">注销</button>
<button type="button" id="remove">不显示年龄</button>

//script
var uname = document.querySelector('#uname');
var age = document.querySelector('#age');
var save = document.querySelector('#save');
var get = document.querySelector('#get');
var clear = document.querySelector('#clear');
var remove = document.querySelector('#remove');

save.onclick = function(){
	sessionStorage.setItem('name',uname.value);
	sessionStorage.setItem('age',age.value);
}

clear.onclick = function(){
	sessionStorage.clear();
}
get.onclick = function(){
	var user = sessionStorage.getItem('name');
	var age = sessionStorage.getItem('age');
	alert('用户'+user+'已登录\n该用户年龄：'+age);
}
remove.onclick = function(){
	sessionStorage.removeItem('age');
}

可按下图所示查看本地存储数据

二、localStorage会话级别的本地存储

localStorage特性：

生命周期永久生效，除非手动删除否则关闭页面也会存在
可以多窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用

语法：

//存储数据
localStorage.setItem(key,value)
//获取数据
localStorage。getItem(key)
//删除数据
localStorage.removeItem(key)
//清楚所有数据
localStorage.clear() // ！谨慎使用

记住用户名案例

<-- html -->
<input type="text" name="" id="uname" value="" />
<input type="checkbox" name="" id="rember" value="" />记住用户名

//script
var uname = document.querySelector('#uname');
var rember = document.querySelector('#rember');
rember.onchange = function(){
	console.log(1);
	if(this.checked){
		localStorage.setItem('uname',uname.value);
	}else{
		localStorage.removeItem('uname');
	}
}
if(localStorage.getItem('uname')){
	uname.value = localStorage.getItem('uname');
	rember.checked = true;
}

个人学习笔记，如有差误欢迎指正