本文主要是介绍一文了解localStorage 和 sessionStorage，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 JavaScript 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。
这篇文章瑶琴带大家学习 JavaScript 中的localStorage 和 sessionStorage的用法。
localStorage 和 sessionStorage 都是 window 对象的属性。它们在全局作用域内是可访问的，可以通过 window 对象来引用它们。
1.localStorage
-
永久性存储：数据在页面会话结束后依然存在，直到主动删除。
-
容量限制：大多数浏览器为 localStorage 提供了大约5MB的存储空间。
-
同源限制：只有来自同一源（协议、域名和端口号都相同）的页面才能共享 localStorage 中的数据。
// 存储数据
localStorage.setItem('username', 'JohnDoe'); // 读取数据
let username = localStorage.getItem('username');
console.log(username); // 输出: JohnDoe // 删除单个数据项
localStorage.removeItem('username'); // 清空所有数据
localStorage.clear();
2.sessionStorage
1.会话性存储：数据只在单个会话期间可用，即只在浏览器打开的情况下有效，并且页面一旦关闭，数据就会被清除。
2.容量限制：与 localStorage 类似，大多数浏览器也为 sessionStorage 提供了大约5MB的存储空间。
3.独立性：同一源的不同页面或标签页拥有独立的 sessionStorage 空间。
// 存储数据
sessionStorage.setItem('viewedPage', 'homepage');
// 读取数据let page = sessionStorage.getItem('viewedPage');console.log(page);
// 输出: homepage
// 页面关闭或刷新后，sessionStorage 中的数据将被清除
下面是常用方法和属性：
setItem(key, value) - 将键值对存储在存储对象中。
getItem(key) - 从一个存储对象中读取数据。
removeItem(key) - 从一个存储对象中移除指定的键值对。
clear() - 清空存储对象中的所有数据。
key(index) - 可以从存储对象中按索引顺序获取一个键。
length - 返回存储对象中的键值对数量。
注意事项：
1.存储的数据是字符串类型，如果需要存储对象或其他数据类型，需要先转换为字符串（通常使用 JSON.stringify()），读取时再转换回原来的类型（使用 JSON.parse()）。
2.Web存储不是加密的，不应该用来存储敏感信息。
3.Web存储的大小限制比Cookies宽松，但仍然有限，对于大量数据的存储，应考虑使用数据库或服务器端存储。
3. 案例
1.记住用户偏好：存储用户的首选语言、主题等偏好设置。
if (!localStorage.getItem('userTheme')) { localStorage.setItem('userTheme', 'light');
}
let theme = localStorage.getItem('userTheme');// 根据主题设置页面样式2.表单自动填充：存储用户之前填写的表单数据，以便在下次访问时自动填充。
// 存储表单数据
localStorage.setItem('formData', JSON.stringify({ name: 'John Doe', email: 'john@example.com' }));// 在表单加载时自动填充数据
let formData = JSON.parse(localStorage.getItem('formData'));
if (formData) { document.getElementById('name').value = formData.name; document.getElementById('email').value = formData.email;
}对于前端来说，这两个属性都是Web存储 API 的一部分，它们提供了一种在用户浏览器中存储数据的方式，使得数据可以在不同的页面加载之间持久化存储，初学者可以结合上面的例子自己实践。
希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。
最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。
这篇关于一文了解localStorage 和 sessionStorage的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
