HTML5 localStorage 本地存储详解与 Bootstrap 实现
本文对比 Cookie 与 HTML5 Web Storage 的差异，重点解析 localStorage 和 sessionStorage 的 API 使用方法。通过 Bootstrap 框架搭建的增删改查示例，展示如何在客户端高效存储数据，避免 HTTP 传输开销，并讨论其容量限制、隐私模式兼容性及爬虫抓取等注意事项。
localStorage 概述与对比
首先介绍 localStorage 的基本概念。
近期在维护旧项目时，发现存在对 Cookie 的操作，经咨询得知目的是缓存部分信息以避免在 URL 中传递参数。然而，这种做法并未充分考量 Cookie 可能带来的负面影响：
第一，Cookie 的大小限制约为 4KB，不适合存储大规模业务数据；第二，Cookie 会随每次 HTTP 请求自动发送，造成带宽浪费。
鉴于本项目面向移动端开发，更适合采用的技术方案是 localStorage。localStorage 可视为对 Cookie 的优化升级，它允许在客户端便捷地存储数据，且不会随 HTTP 请求传输。但该技术同样存在局限性：
第一，localStorage 的容量限制约为 500 万字符，具体数值因浏览器而异；第二，在隐私浏览模式下无法读取数据；第三，其本质涉及文件读写操作，数据量大时可能导致性能卡顿（例如 Firefox 会将数据一次性导入内存，性能开销较大）；第四，搜索引擎爬虫无法抓取 localStorage 内容，因此不能完全替代 URL 传参。尽管存在上述瑕疵，但瑕不掩瑜，关键在于如何正确使用 localStorage。
摘要：
HTML5 本地存储机制
过去，若仅需在前端存储数据而无需服务端处理，开发者通常只能依赖 Cookie。由于 Cookie 会随请求头在客户端与服务器间反复传输，且存在诸多缺陷，HTML5 引入了 Web Storage API 以提供更优的客户端数据存储方案。
Cookie 与 Web Storage 的主要区别如下：
- Cookie 存在大小限制，仅能存储约 4KB 数据，且对数量有限制；而 Web Storage 可存储约 5MB 数据。
- Cookie 会随请求头在客户端和服务端之间传递，从而影响网络带宽效率。
- Cookie 需要设置有效期，而 localStorage 为永久保存，sessionStorage 则为会话级保存。
- Cookie 支持设置作用路径（path）。
- Cookie 的操作相对复杂，而 Web Storage 提供了更简洁的 API。
- Cookie 的浏览器兼容性优于 Web Storage。
Web Storage 类型与特性
Web Storage 包含两种存储方式：
- localStorage：有效期为永久，数据持久保存，除非用户手动删除。
- sessionStorage：有效期为一次会话时间，关闭标签页或浏览器后数据清除。
- globalStorage、indexedDB 和 WebSQL 因兼容性和实用性较差，在此不予采用。
API 使用方法与 Bootstrap 示例
localStorage 和 sessionStorage 的使用方法（API）如下：
- localStorage 和 sessionStorage 的操作方法一致。
- 主要功能包括增、删、改、查。
增加或修改数据：使用 localStorage.setItem(key, value) 或直接赋值如 localStorage.a = 1。
查询数据：通过 length 属性获取项数，使用 key(index) 方法获取对应键名，通过 getItem(key) 或直接访问 localStorage.a 获取值。
删除数据：使用 removeItem(key) 方法移除指定键值对。
清空所有数据：调用 clear() 方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
.panel-body input.form-control{
width: 200px;
}
</style>
<body>
<div class="container">
<div class="panel panel-primary insert">
<div class="panel-heading">
增加
</div>
<div class="panel-body">
<label for="">key:</label>
<input type="text" id="key" class="form-control">
<label for="">value:</label>
<input type="text" id="value" class="form-control">
<button onclick="save()">save</button>
</div>
</div>
<div class="panel panel-primary select">
<div class="panel-heading">
key-value-list:
</div>
<div class="panel-body">
<button onclick="select()" class="btn btn-success">select</button>
<button onclick="abc()" class="btn btn-warning">clear</button>
<hr>
<ul class="list-group">
</ul>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
function save(){
var key = $(".insert #key").val()
var value = $(".insert #value").val()
localStorage.setItem(key,value)
//select()
}
function select(){
let str = ''
for(var i = 0;i < localStorage.length;i ++){
var key = localStorage.key(i)
var value = localStorage.getItem(key)
str +=`
<li class="list-group-item clearfix">
key: <span class="label label-primary key">${key}</span>
value: <span class="label label-primary value">${value}</span>
<button data-key='${key}' class="btn btn-danger delete pull-right">delete</button>
</li>
`
}
$(".select ul").html(str)
}
function abc(){
localStorage.clear()
$(".select ul").html("")
}
$(".select ul").delegate(".delete",'click',function () {
console.log(1)
var key = $(this).data("key")
localStorage.removeItem(key)
$(this).parent().remove()
})
</script>
</body>总结
以上介绍了基于 Bootstrap 实现的 localStorage 本地存储功能，希望有所帮助。如有任何疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！
WebStorm内置JS代码格式化功能怎么用
2026-11-05 10:10:47
在线JS代码格式化与混淆压缩工具推荐及使用指南
2026-11-03 20:31:53
CodePen、JSFiddle与RunJS对比：哪款在线JavaScript编辑器更好用
2026-11-03 18:52:45
无需安装环境，5款主流JavaScript在线运行工具推荐
2026-11-03 18:23:26
JS怎么将地址栏查询字符串转换为JSON对象
2026-11-03 18:10:29