前端本地存储 localStorage 实战练习（记住筛选、记住账号、退出登录、Cookie 解析）

本篇基于 jQuery 原生练习案例，带你搞懂 localStorage 增删改查、对象序列化、业务场景落地，同时简单了解 Cookie 字符串解析。日常后台管理系统经常会用到本地存储做表单回填、登录状态保存。
一、什么是 localStorage
localStorage 是浏览器提供的持久化本地存储，关闭浏览器数据不会丢失，只能存字符串。
setItem(key,value)：存储数据
getItem(key)：读取数据
removeItem(key)：删除单条数据
clear()：清空全部存储
hasOwnProperty(‘key’)：判断某个 key 是否存在
⚠️ 重点：不能直接存对象 / 数组，必须先用 JSON.stringify() 转字符串；读取回来再用 JSON.parse()转回对象。
实战场景 1：记住搜索筛选条件
业务场景
管理列表页，用户输入关键词、选择下拉筛选条件，刷新页面希望筛选条件自动回填，不用重新选。
实现思路
页面加载：读取goodsFilter，如果有数据，JSON.parse 转回对象，回填到输入框、下拉框。
点击保存筛选：获取输入框和下拉的值，打包成对象，JSON.stringify转为字符串存入localStorage。
js
运行
// 页面打开回填筛选条件
let filterStr = localStorage.getItem(‘goodsFilter’)
if (filterStr) {
let filterObj = JSON.parse(filterStr)
$(‘#keyword’).val(filterObj.keyword)
$(‘#status’).val(filterObj.status)
}

// 点击保存筛选
$(‘#saveFilter’).click(function () {
let keyword = $(‘#keyword’).val().trim()
let status = $(‘#status’).val()
let filter = {
keyword: keyword,
status: Number(status)
}
localStorage.setItem(‘goodsFilter’, JSON.stringify(filter))
alert(‘筛选条件已保存！刷新页面看回填效果’)
})
踩坑提醒：直接存对象会变成 [object Object]，无法读取，对象必须序列化。
实战场景 2：记住账号（记住登录账号，勾选复选框生效）
业务场景
登录页 “记住账号”，勾选后下次打开页面自动回填账号，取消记住就清除保存的账号。
这里只存账号字符串，不需要对象，不用 JSON 转换。
实现思路
页面加载：判断rememberAccount是否存在，存在回填账号，同时勾选复选框。
监听复选框change事件：
勾选：把输入框账号存入rememberAccount
取消勾选：removeItem删除这条存储
js
运行
let $account = $(‘#account’)
let $rememberAccount = $(‘#rememberAccount’)

// 页面加载回填账号
if (localStorage.hasOwnProperty(‘rememberAccount’)) {
$account.val(localStorage.getItem(‘rememberAccount’))
$rememberAccount.prop(‘checked’, true)
} else {
$rememberAccount.prop(‘checked’, false)
}

// 复选框切换
$rememberAccount.on(‘change’, function () {
if (this.checked) {
let inputVal = $account.val().trim()
localStorage.setItem(‘rememberAccount’, inputVal)
} else {
localStorage.removeItem(‘rememberAccount’)
}
})
小知识点：hasOwnProperty(‘key’)专门用来判断本地存储有没有这条 key。
实战场景 3：退出登录两种清除存储方式
业务场景
系统退出登录，有两种需求：
只删除登录相关：token、rememberAccount，其它本地存储保留。
全部清空浏览器本地存储。
实现思路
部分删除：多次调用removeItem()，只删除指定 key，其它数据保留。
全部清空：localStorage.clear()，一键清空所有 key，慎用！
js
运行
// 只删除登录相关数据，保留其它存储
$(‘#logout1’).on(‘click’, function () {
localStorage.removeItem(‘token’)
localStorage.removeItem(‘rememberAccount’)
console.log(‘已删除token、rememberAccount’)
})

// 清空全部 localStorage，一锅端
$(‘#logout2’).on(‘click’, function () {
localStorage.clear()
console.log(‘全部本地存储已清空’)
})
业务建议：真实项目退出登录优先用第一种，只删登录凭证，不要直接 clear，会把用户其它缓存全部删掉。
实战场景 4：判断 token，检测登录状态
业务场景
页面打开先检测本地有没有 token，有 token 代表已登录，没有就跳转到登录页。
实现思路
设置 token：模拟登录成功，往 localStorage 存 token 字符串。
删除 token：模拟退出登录删掉凭证。
检测登录：hasOwnProperty(‘token’)判断 key 是否存在，做状态判断。
js
运行
// 模拟登录，设置token
$(‘#setToken’).click(function () {
localStorage.setItem(‘token’, ‘abcd123456’)
console.log(‘已模拟设置token’)
})

// 删除token
$(‘#delToken’).click(function () {
localStorage.removeItem(‘token’)
console.log(‘已删除token’)
})

// 检测登录状态
$(‘#checkToken’).click(function () {
if (localStorage.hasOwnProperty(‘token’)) {
console.log(‘✅已登录’)
} else {
console.log(‘❌未登录，请去登录页’)
}
})
真实开发：拿到 token 后一般存在请求头做接口鉴权；localStorage 存 token 有 XSS 风险，重要项目 token 更多放 Cookie。
实战场景 5：解析 document.cookie 字符串
业务场景
浏览器拿到的document.cookie是一长串分号隔开的字符串，需要手动切割取出我们需要的值，例如 token。
示例原始字符串：username=zhangsan; token=abc123456; theme=dark
实现思路
使用 split(‘; ‘) 以; 切割，得到每一条键值对数组。
循环数组，每一项再次用 split(’=’)切割，分离 key 和 value。
判断 key 等于token，把 value 保存出来。
js
运行
$(‘#parseCookie’).click(function () {
// 模拟浏览器cookie字符串
let cookieStr = “username=zhangsan; token=abc123456; theme=dark”
let arr = cookieStr.split(‘; ‘)
let targetToken = ‘’
for (let i = 0; i < arr.length; i++) {
let itemArr = arr[i].split(’=’)
let key = itemArr[0]
let value = itemArr[1]
if (key === ‘token’) {
targetToken = value
}
}
console.log(‘解析出来的token：’, targetToken)
})
Cookie 和 localStorage 简单区分
localStorage：仅客户端，不会随请求自动发给后端，存储量大，永久保存。
Cookie：会自动跟随 http 请求传给后端，可以设置过期时间，容量小。
总结
localStorage 只能存字符串，存对象必须 JSON.stringify，读取用JSON.parse解析。
局部删除用removeItem(key)，全部清除才用clear()，业务尽量少用 clear。
hasOwnProperty(key)判断本地存储是否存在某个键，做登录判断很常用。
Cookie 是分号拼接长字符串，要两次 split 切割才能取出对应值。
业务场景：筛选条件缓存、记住账号、登录凭证判断，是后台系统高频用法。