HTML5 本地存储(localStorage & sessionStorage)

已于 2023-03-27 17:14:53 修改
阅读量1.6k 收藏 11
点赞数 1
分类专栏： # HTML & HTML5 文章标签： html5 前端 localStorage sessionStorage
于 2022-12-28 09:53:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14876133/article/details/128464406
版权

文章目录

HTML5 本地存储(localStorage & sessionStorage)

Cookie的缺点

在HTML4.01中，想要在浏览器端存储用户的某些数据时，我们一般只能使用Cookie来实现。

但是Cookie存在一些问题：

  • 大小限制：大多数浏览器支持最大为4KB的Cookie。
  • 数量限制：大多数浏览器只允许每个站点存储20个Cookie，如果想要存储更多Cookie，则旧的Cookie将会被丢弃。
  • 有些浏览器还会对它们将接收的来自所有站点的Cookie总数做出绝对限制，通常为300个。
  • Cookie默认情况下都会随着HTTP请求发送到后台，但是实际上大多数请求都是不需要Cookie的。

为了解决Cookie这种方式的限制，HTML5新增了3种全新的数据存储方式：localStorage、sessionStorage和indexedDB：

  • localStorage用于永久保存客户端的少量数据。
  • sessionStorage用于临时保存客户端的少量数据。
  • indexedDB用于永久保存客户端的大量数据。

localStorage和sessionStorage区别

localStorage和sessionStorage是HTML5中提供的两个Web存储API，用于在浏览器端存储数据。

相同点

localStorage和sessionStorage都可以存储键值对数据，并且它们都是基于同源策略的。这意味着只有在相同的协议、主机名和端口号下，才能访问同一个localStorage或sessionStorage对象。

区别

  • localStorage：
    • 存储在localStorage中的数据没有过期时间，除非被显式删除。
    • 作用域为整个域名，在同一域名下的所有页面都可以访问同一个localStorage对象。
    • 每个域名的容量限制为5MB或更大。
  • sessionStorage：
    • 存储在sessionStorage中的数据仅在当前会话期间有效。当用户关闭浏览器窗口时，sessionStorage中的数据将被删除。
    • 作用域限制在当前窗口或标签页，不同的标签页或窗口无法共享同一个sessionStorage对象。
    • 容量限制则相对较小，一般为5MB以下。

以下是各个浏览器对于localStorage和sessionStorage容量限制的具体情况：

  • Chrome：localStorage和sessionStorage的容量限制都为5MB。
  • Firefox：localStorage和sessionStorage的容量限制都为10MB。
  • Safari：localStorage和sessionStorage的容量限制都为5MB。
  • Internet Explorer：localStorage和sessionStorage的容量限制都为10MB。
  • Microsoft Edge：localStorage和sessionStorage的容量限制都为10MB。

localStorage

常用方法

方法说明
setItem(key, value)保持数据
getItem(key)获取数据
removeItem(key)删除数据
clear()清空所有数据
key(n)获取第n个值，n为整数

简单使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			table {
				border-collapse: collapse;
			}

			table td {
				width: 100px;
				line-height: 30px;
				border: 1px solid #000;
				text-align: center;
			}
		</style>
		<script>
			function Item(key, value) {
				this.key = key;
				this.value = value;
			}

			var arr = [];

			function setTable() {
				queryLocal();
				var tbody = document.querySelector("tbody");
				var html = "";
				arr.forEach(function(value, index, array) {
					html += `<tr>`;
					html += `<td>${value.key}</td>`;
					html += `<td>${value.value}</td>`;
					html += `<td><button index="${index}">删除</button></td>`;
					html += `</tr>`;
				})
				tbody.innerHTML = html;
				setDelBtn();
			}

			function setDelBtn() {
				var delBtns = document.querySelectorAll("tbody button");
				for (var i = 0; i < delBtns.length; i++) {
					delBtns[i].onclick = function() {
						var index = this.getAttribute("index");
						var delArr = arr.splice(index, 1);
						delArr.forEach(function(value, index, array) {
							deleteLocal(value.key);
						})
						setTable();
					}
				}
			}

			/**
			 * localStorage添加数据
			 */
			function addLocal(key, value) {
				localStorage.setItem(key, value);
			}

			/**
			 * localStorage删除数据
			 */
			function deleteLocal(key) {
				localStorage.removeItem(key);
			}

			/**
			 * localStorage清空数据
			 */
			function clearLocal() {
				localStorage.clear();
			}

			/**
			 * localStorage获取所有数据
			 */
			function queryLocal() {
				arr = [];
				for (var i = 0; i < localStorage.length; i++) {
					var key = localStorage.key(i);
					var value = localStorage.getItem(key);
					arr.push(new Item(key, value));
				}
			}

			window.onload = function() {
				var keyInput = document.getElementById("keyInput");
				var valueInput = document.getElementById("valueInput");
				var addBtn = document.getElementById("addBtn");
				var queryBtn = document.getElementById("queryBtn");
				var clearBtn = document.getElementById("clearBtn");
				var table = document.getElementById("table");

				addBtn.onclick = function() {
					addLocal(keyInput.value, valueInput.value);
					keyInput.value = "";
					valueInput.value = "";
					setTable();
				}
				queryBtn.onclick = function() {
					setTable();
				}
				clearBtn.onclick = function() {
					clearLocal();
					setTable();
				}
			}
		</script>
	</head>
	<body>
		<p><label>key: <input id="keyInput" type="text"></label></p>
		<p><label>value: <input id="valueInput" type="text"></label></p>
		<p>
			<input id="addBtn" type="button" value="增加">
			<input id="queryBtn" type="button" value="查询">
			<input id="clearBtn" type="button" value="清空">
		</p>
		<table id="table">
			<thead>
				<tr>
					<td>key值</td>
					<td>value值</td>
					<td>删除</td>
				</tr>
			</thead>
			<tbody> </tbody>
		</table>
	</body>
</html>

在这里插入图片描述

sessionStorage

常用方法

在HTML5中，我们可以使用sessionStorage对象来“暂时”保存客户端的少量数据。sessionStorage对象跟localStorage对象非常相似，两者有着完全相同的方法。

方法说明
setItem(key, value)保持数据
getItem(key)获取数据
removeItem(key)删除数据
clear()清空所有数据
key(n)获取第n个值，n为整数

简单使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			table {
				border-collapse: collapse;
			}

			table td {
				width: 100px;
				line-height: 30px;
				border: 1px solid #000;
				text-align: center;
			}
		</style>
		<script>
			function Item(key, value) {
				this.key = key;
				this.value = value;
			}

			var arr = [];

			function setTable() {
				queryLocal();
				var tbody = document.querySelector("tbody");
				var html = "";
				arr.forEach(function(value, index, array) {
					html += `<tr>`;
					html += `<td>${value.key}</td>`;
					html += `<td>${value.value}</td>`;
					html += `<td><button index="${index}">删除</button></td>`;
					html += `</tr>`;
				})
				tbody.innerHTML = html;
				setDelBtn();
			}

			function setDelBtn() {
				var delBtns = document.querySelectorAll("tbody button");
				for (var i = 0; i < delBtns.length; i++) {
					delBtns[i].onclick = function() {
						var index = this.getAttribute("index");
						var delArr = arr.splice(index, 1);
						delArr.forEach(function(value, index, array) {
							deleteLocal(value.key);
						})
						setTable();
					}
				}
			}

			/**
			 * sessionStorage添加数据
			 */
			function addLocal(key, value) {
				sessionStorage.setItem(key, value);
			}

			/**
			 * sessionStorage删除数据
			 */
			function deleteLocal(key) {
				sessionStorage.removeItem(key);
			}

			/**
			 * sessionStorage清空数据
			 */
			function clearLocal() {
				sessionStorage.clear();
			}

			/**
			 * sessionStorage获取所有数据
			 */
			function queryLocal() {
				arr = [];
				for (var i = 0; i < sessionStorage.length; i++) {
					var key = sessionStorage.key(i);
					var value = sessionStorage.getItem(key);
					arr.push(new Item(key, value));
				}
			}

			window.onload = function() {
				var keyInput = document.getElementById("keyInput");
				var valueInput = document.getElementById("valueInput");
				var addBtn = document.getElementById("addBtn");
				var queryBtn = document.getElementById("queryBtn");
				var clearBtn = document.getElementById("clearBtn");
				var table = document.getElementById("table");

				addBtn.onclick = function() {
					addLocal(keyInput.value, valueInput.value);
					keyInput.value = "";
					valueInput.value = "";
					setTable();
				}
				queryBtn.onclick = function() {
					setTable();
				}
				clearBtn.onclick = function() {
					clearLocal();
					setTable();
				}
			}
		</script>
	</head>
	<body>
		<p><label>key: <input id="keyInput" type="text"></label></p>
		<p><label>value: <input id="valueInput" type="text"></label></p>
		<p>
			<input id="addBtn" type="button" value="增加">
			<input id="queryBtn" type="button" value="查询">
			<input id="clearBtn" type="button" value="清空">
		</p>
		<table id="table">
			<thead>
				<tr>
					<td>key值</td>
					<td>value值</td>
					<td>删除</td>
				</tr>
			</thead>
			<tbody> </tbody>
		</table>
	</body>
</html>
xiangxiongfly915
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 sessionStorage会话存储
lmrylll的博客
06-13 1567
sessionStorage 是HTML5新增的一个会话存储对象，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象。
h5 新增本地存储localStorage、sessionStorage
weixin_43294560的博客
01-13 906
localStorage 用户不主动删除永久存在,域名区分 sessionStorage 浏览器关闭时删除 操作: 写入: localStorage/sessionStorage.setItem('key','value'); 读取: localStorage/sessionStorage.getItem('key'); 删除: localStorage/sess......
HTML5本地存储-localStorage操作使用详解
最新发布
2401_84152797的博客
04-19 934
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
h5新增浏览器本地缓存localStorage
weixin_34405557的博客
05-21 232
h5新增属性学习笔记（非原创） html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。 sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。 因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。 而loc...
html5 LocalStorage本地存储介绍
有勇气的牛排博客
11-03 720
Web存储对象有localStorage和sessionStorage两种，它允许我们以键值对的形式在浏览器上保存数据。相同点属性说明存储键值对获取键的值删除指定键clear删除所有数据key(index)获取对应索引的键名length存储键值对数据localStorage 用于长久保存网站数据，无过期时间，除非删除。在同源的所有标签页与窗口之间数据共享。存储字段类型为字符串，使用需自己转换为所需类型使用方法同数据仅存在于当前浏览器标签页。
HTML5 localStorage、sessionStorage 作用域
weixin_30894389的博客
06-13 1174
一、localStorage localStorage有效期：永不失效，除非web应用主动删除。 localStorage作用域：localStorage的作用域是限定在文档源级别的。文档源通过协议、主机名以及端口三者来确定。 例如：http://xxx.example.com https://xxx.example.com http://xxx.e...
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
09-28
HTML5的本地存储功能主要由两个API提供：localStorage和sessionStorage。它们允许Web应用程序在用户的浏览器上持久存储数据，而不依赖于服务器或Cookie。这两者的主要区别在于数据的生命周期：localStorage的数据...
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
12-14
使用HTML5 Web存储的localStorage和sessionStorage方式进行Web页面数据本地存储。 页面参考如下图，能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。 localStorage（本地存储）,可以长期存储数据，...
html5本地存储 localStorage操作使用详解
09-27
HTML5本地存储是现代Web应用中一项重要的技术，它允许开发者在用户的浏览器中存储大量数据，以便离线访问或提高页面加载速度。其中，`localStorage` 是一种持久化的本地存储方式，而 `sessionStorage` 则是在一个...
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
12-13
html5的一个非常cool的功能，就是web storage，类似于之前的cookie，不过与之不同的是，web storage 拥有本地5兆的容量可以存储，而cookie却只有4K，这是完全不能比的优势。webstrange又分为：localstorage，...
H5本地存储详细使用教程（localStorage + JSON数据存储应用框架）
热门推荐
林洪炳的日常技术积累
01-09 6万+
H5本地存储有两个API，一个是Web Storage，还有一个是Web SQL。不管是哪一个，都是基于JavaScript语言来使用，接下来我就教你怎么使用H5本地存储，本文篇幅较大，JS代码较多，请耐心阅读。 一、Web Storage教程 1、概述： 对于Web Storage来说，实际上是Cookies存储的进化版。如果了解Cookie的人几乎一看Web
HTML5 使用 sessionStorage 进行页面传值的方法
09-28
主要介绍了HTML5 使用 sessionStorage 进行页面传值的方法的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
localStorage不同浏览器支持的大小统计
sll19891018的博客
06-25 6920
localStorage不同浏览器支持大小的统计方法：(function() { if(!window.localStorage) { console.log('当前浏览器不支持localStorage!') } var test = '0123456789'; var add = function(num) { num +=...
html5本地存储——sessionStorage和localStorage
leilei7407的博客
05-17 1256
sessionStorage和localStorage数据的存储以及获取，以及两者的区别 html5中提供了两种本地存储的方式：localStorage（本地存储）和sessionStorage（会话存储） window.sessionStorage（会话存储）：暂时储存，浏览器关闭之后会清除 window.localStorage （本地存储）：本地储存，浏览器关闭之后依旧不会清除，只能人为删除 平时储存的话建议使用sessionStorage； 本地存储特性： 1.数据存储在用户浏览器中 2.设置.
数据存储（二）WebStorage 之 sessionStorage、globalStorage、localStorage
KEEP RUNNING的博客
11-24 1893
sessionStorage在多窗口之间是否能共享状态？ sessionStorage数据存储在哪里？ sessionStorage和localStorage区别？
H5 的 sessionStorage和localStorage
YMP35106933的博客
09-09 140
1） H5 新增的 sessionStorage 和 localStorage 的区别 　　sessionStorage 和 java 的 session 差不多，可以短时间存储信息，电脑浏览器常用sessionStorage存储用户登录信息（个人理解） 　　localStorage可以永久保留用户信息，不用每次都登录，常用于APP 2）sessionStorage...
html5本地存储技术sessionStorage和localStorage方法介绍
邪小新的博客
03-28 496
在Html5之前浏览器存储数据，尤其是用户浏览器的痕迹，以及用户的相关数据等一般只能存储在Cookie中，但是Cookie的限制也就逼迫网站存储数据尽量精简，复杂的、关系型的用户数据就根本不可能存储了。cookie的限制是（4096字节） 随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。 ...
JQuery和JS操作LocalStorage/SessionStorage的方法
一碗单炒饭的专栏
02-26 5万+
首先说一下LocalStorage和SessionStorageLocalStorage 是对Cookie的优化 没有时间限制的数据存储 在隐私模式下不可读取 大小限制在500万字符左右，各个浏览器不一致 在所有同源窗口中都是共享的 本质是在读写文件，数据多的话会比较卡（firefox会一次性将数据导入内存） 不能被爬虫爬取，不要用它完全取代URL传参 IE７及以下不支持外，其他标准浏览器都完全支持
html点击编辑状态,一样的table？不一样的table(可编辑状态table)
weixin_36036343的博客
05-31 245
新的一天开始了，生活还要继续，今天要和大家分享的是不一样的table，普通的table就用于显示数据，今天要分享的table不仅仅能显示数据，还可以对数据进行编辑，当鼠标点击数据时相应的数据格就变成可编辑的状态，废话不多说，进入今天的主题，首先完成HTML页面：JQueryProject1鼠标点击下列内容可以进行编辑学号姓名000001张三000002李四000003王五000004赵六没错现在它...
本地存储 localStorage 和 sessionStorage
10-14
localStorage 和 sessionStorage 都是 HTML5 提供的 Web 存储 API，用于在客户端存储数据。它们的区别在于存储数据的生命周期不同。 localStorage 存储的数据没有过期时间，除非用户手动清除或者使用代码清除。而 sessionStorage 存储的数据只在当前会话（session）有效，当用户关闭浏览器窗口后，数据就会被清除。 使用方式类似，都是通过 JavaScript 的 localStorage 和 sessionStorage 对象进行操作。例如，存储数据可以使用 setItem 方法，获取数据可以使用 getItem 方法。 示例代码： ```javascript // 存储数据到 localStorage localStorage.setItem('key', 'value'); // 从 localStorage 获取数据 const value = localStorage.getItem('key'); console.log(value); // 输出：value // 存储数据到 sessionStorage sessionStorage.setItem('key', 'value'); // 从 sessionStorage 获取数据 const value = sessionStorage.getItem('key'); console.log(value); // 输出：value ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值