localStorage持久存储数据，sessionStorage仅在会话期间有效；二者均基于同源策略，但sessionStorage限于单标签页，常用于临时数据如表单内容，而localStorage适合长期缓存用户偏好等信息。
HTML5 提供了两种本地存储方式：localStorage 和 sessionStorage，它们让网页能在用户浏览器中保存数据，比传统的 Cookie 更方便、容量更大。下面详细介绍它们的使用方法和区别。
localStorage 的基本用法
localStorage 用于长期保存数据，除非手动清除，否则数据不会过期。
常用操作包括：
保存数据：使用 localStorage.setItem(key, value) 方法。例如：
localStorage.setItem(‘username’, ‘张三’);读取数据：使用 localStorage.getItem(key)。例如：
let name = localStorage.getItem(‘username’);删除数据：使用 localStorage.removeItem(key)。例如：
localStorage.removeItem(‘username’);清空所有数据：使用 localStorage.clear();
注意：localStorage 只能存储字符串。如果要存对象，需先转换为 JSON 字符串：
立即学习“前端免费学习笔记（深入）”；
localStorage.setItem(‘user’, JSON.stringify({name: ‘张三’, age: 25}));
let userData = JSON.parse(localStorage.getItem(‘user’));
sessionStorage 的基本用法
sessionStorage 与 localStorage 接口一致，但生命周期不同 —— 数据仅在当前会话有效，关闭浏览器标签页后自动清除。
常见用途包括保存表单临时输入、页面状态等。
保存数据：sessionStorage.setItem(‘tempData’, ‘临时内容’);获取数据：sessionStorage.getItem(‘tempData’);删除数据：sessionStorage.removeItem(‘tempData’);清空会话数据：sessionStorage.clear();
localStorage 和 sessionStorage 的区别
生命周期：localStorage 持久保存，sessionStorage 在页面会话结束时清除。作用域：两者都基于同源策略（同协议、域名、端口），但 sessionStorage 还限制在同一个标签页内。适用场景：localStorage 适合长期缓存（如用户偏好），sessionStorage 适合临时数据（如购物车未结算信息）。
注意事项和兼容性
大多数现代浏览器都支持，但在使用前可简单判断是否可用：
if (typeof(Storage) !== “undefined”) { /* 可以使用 */ }存储大小一般为 5~10MB，具体取决于浏览器。不能跨域访问，且数据始终属于字符串类型，复杂类型需序列化。敏感信息不建议明文存储，存在 XSS 风险。
基本上就这些。掌握 setItem、getItem、removeItem 和 clear 这四个方法，就能熟练使用 HTML5 的本地存储功能。根据实际需求选择 localStorage 或 sessionStorage，能有效提升用户体验。
以上就是HTML5本地存储怎么用_HTML5localStorage和sessionStorage的使用方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1597370.html
微信扫一扫 
支付宝扫一扫 
