HTML5 localStorage 本地存储完整指南:用法、限制与代码示例

作者:百宝袋时间:2026-10-22 06:34:22浏览:163

本文详解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里

作者最新文章