HTML5 localStorage 本地存储完整指南:用法、限制与代码示例
本文详解HTML5 localStorage特性,对比cookie分析其5M存储优势与浏览器兼容性局限。通过clear、setItem、getItem、removeItem等API示例,演示数据增删改查及JSON对象序列化存储方法,帮助开发者掌握前端本地存储核心技能。
localStorage 基本概念
一、什么是localStorage?
HTML5引入了localStorage这一新特性,旨在提供比Cookie更充足的本地存储空间。传统Cookie每条仅能存储约4KB数据,而主流浏览器对localStorage的支持容量通常达到5MB,具体数值因浏览器实现而异。
二、localStorage的优势与局限
localStorage 优势与局限分析
二、localStorage的优势与局限
1、localStorage拓展了cookie的4K限制
2、localStorage允许将首次请求的数据直接缓存至本地,其容量约为5MB,相当于一个面向前端页面的轻量级数据库。相比Cookie,它能有效节省带宽,但该特性仅支持较高版本的现代浏览器。
二、localStorage的优势与局限
1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
5、localStorage不能被爬虫抓取到
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空。
三、localStorage的使用
localStorage 核心 API 操作指南
三、localStorage的使用
localStorage.clear() // undefined
localStorage //Storage {length: 0} 存储数据
清空localStorage
localStorage.setItem("name","caibin") //存储名字为name值为caibin的变量
localStorage.name = "caibin"; // 等价于上面的命令
localStorage // Storage{name: "caibin", length: 1} 读取数据
存储数据
localStorage.getItem("name") //caibin,读取保存在localStorage对象里名为name的变量的值
localStorage.name // "caibin"
localStorage.valueOf() //读取存储在localStorage上的所有数据
localStorage.key(0) // 读取第一条数据的变量名(键值)
//遍历并输出localStorage里存储的名字和值
for(var i=0; i<localStorage.length;i++){
console.log('localStorage里存储的第'+i+'条数据的名字为:'+localStorage.key(i)+',值为:'+localStorage.getItem(localStorage.key(i)));
}
读取数据
localStorage.removeItem("name"); //undefined
localStorage // Storage {length: 0} 可以看到之前保存的name变量已经从localStorage里删除了
删除某个变量
// 这些数据都是测试的,是在我当下环境里的,只是demo哦~
localStorage.hasOwnProperty('name') // true
localStorage.hasOwnProperty('sex') // false
检查localStorage里是否保存某个变量
var arr = ['aa','bb','cc']; // ["aa","bb","cc"]
localStorage.arr = arr //["aa","bb","cc"]
localStorage.arr.toLocaleString(); // "aa,bb,cc"
将数组转为本地字符串
var students = {
xiaomin: {
name: "xiaoming",
grade: 1
},
teemo: {
name: "teemo",
grade: 3
}
}
students = JSON.stringify(students); //将JSON转为字符串存到变量里
console.log(students);
localStorage.setItem("students",students);//将变量存到localStorage里
var newStudents = localStorage.getItem("students");
newStudents = JSON.parse(students); //转为JSON
console.log(newStudents); // 打印出原先对象
将JSON存储到localStorage里
定制 Quill.js 主题样式:修改默认 CSS 与添加自定义类名
2026-11-04 11:21:35
混淆JS代码怎么在线反混淆并格式化阅读
2026-11-03 21:46:39
JS在线编辑器代码报错怎么调试?控制台使用技巧
2026-11-03 21:24:56
从 marked.js 旧版本升级到最新版:API 变更与迁移指南
2026-11-03 17:38:17
JS富文本编辑器Quill与代码编辑器CodeMirror的区别及应用场景
2026-11-03 16:52:09
