本篇基于 jQuery 原生练习案例带你搞懂 localStorage 增删改查、对象序列化、业务场景落地同时简单了解 Cookie 字符串解析。日常后台管理系统经常会用到本地存储做表单回填、登录状态保存。一、什么是 localStoragelocalStorage 是浏览器提供的持久化本地存储关闭浏览器数据不会丢失只能存字符串。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。示例原始字符串usernamezhangsan; tokenabc123456; themedark实现思路使用 split(‘; ‘) 以; 切割得到每一条键值对数组。循环数组每一项再次用 split(’’)切割分离 key 和 value。判断 key 等于token把 value 保存出来。js运行$(‘#parseCookie’).click(function () {// 模拟浏览器cookie字符串let cookieStr “usernamezhangsan; tokenabc123456; themedark”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 切割才能取出对应值。业务场景筛选条件缓存、记住账号、登录凭证判断是后台系统高频用法。