HTML5本地存储是一种在浏览器中存储数据的方法，它可以用于存储各种类型的资源，如样式表、JavaScript、图片等，HTML5提供了两种本地存储方法：localStorage和sessionStorage，这两种方法的主要区别在于数据的生命周期和作用范围。
（图片来源网络，侵删）
1、localStorage
localStorage是HTML5提供的一种客户端存储技术，它允许网页在用户的浏览器中长期存储数据，localStorage的数据没有过期时间，除非用户手动清除浏览器缓存或者使用JavaScript代码删除数据。
特点：
数据长期存储，直到用户手动清除浏览器缓存或使用JavaScript删除数据。
数据以键值对的形式存储，每个键对应一个字符串值。
数据的作用范围仅限于同一个域名下的网页。
使用方法：
// 存储数据
localStorage.setItem('key', 'value');
// 获取数据
var data = localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
// 清除所有数据
localStorage.clear();
2、sessionStorage
sessionStorage是HTML5提供的一种客户端存储技术，它允许网页在用户的浏览器中临时存储数据，sessionStorage的数据在会话结束时自动清除，即当用户关闭浏览器标签页或窗口时。
特点：
数据临时存储，在会话结束时自动清除。
数据以键值对的形式存储，每个键对应一个字符串值。
数据的作用范围仅限于同一个域名下的网页。
使用方法：
// 存储数据
sessionStorage.setItem('key', 'value');
// 获取数据
var data = sessionStorage.getItem('key');
// 删除数据
sessionStorage.removeItem('key');
// 清除所有数据
sessionStorage.clear();
3、示例：使用localStorage和sessionStorage存储样式表、JavaScript和图片资源
（1）存储样式表：
<!DOCTYPE html>
<html>
<head>
<title>Local Storage Example</title>
<link rel="stylesheet" id="myStylesheet">
</head>
<body>
<script>
// 存储样式表到localStorage
localStorage.setItem('stylesheet', 'myStylesheet.css');
// 从localStorage获取样式表并应用到页面上
document.getElementById('myStylesheet').href = localStorage.getItem('stylesheet');
</script>
</body>
</html>
（2）存储JavaScript文件：
<!DOCTYPE html>
<html>
<head>
<title>Local Storage Example</title>
<script src=""></script>
</head>
<body>
<script>
// 存储JavaScript文件到localStorage
localStorage.setItem('script', 'myScript.js');
// 从localStorage获取JavaScript文件并插入到页面中
var script = document.createElement('script');
script.src = localStorage.getItem('script');
document.body.appendChild(script);
</script>
</body>
</html>
（3）存储图片资源：
<!DOCTYPE html>
<html>
<head>
<title>Local Storage Example</title>
</head>
<body>
<img id="myImage" src="">
<script>
// 存储图片资源到localStorage（需要将图片转换为DataURL格式）
var image = new Image();
image.src = 'myImage.jpg'; // 替换为实际图片路径或URL
image.onload = function() {
localStorage.setItem('image', image.src); // 将图片的src属性存储到localStorage中，注意需要将图片转换为DataURL格式（如：data:image/jpeg;base64,/9j/4AAQSk...）；}});}});}window.onload = function() {});}});}else{}}));}});}});}});}});}});}});}});}});}});)};;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;document.getElementById('myImage').src = localStorage.getItem('image'); // 从localStorage获取图片资源并显示在页面上；}}}})})})})})})})})})})})})'))))))))))))))))))))))))))))))))))))))))</script>
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/477907.html
微信扫一扫