【高频考点精讲】手写localStorage封装：从基础操作到过期时间设置，打造实用存储工具

手写localStorage封装：从基础操作到过期时间设置，打造实用存储工具

‍ 作者：全栈老李

更新时间：2025 年 5 月

‍ 适合人群：前端初学者、进阶开发者

版权：本文由全栈老李原创，转载请注明出处。

大家好，我是全栈老李。今天咱们聊聊前端存储那点事儿，特别是localStorage这个老熟人。别看它简单，用好了能解决不少实际问题，用不好可能就是坑。

先说说localStorage的基本特性：持久化存储、同源策略、5MB左右容量、只能存字符串。这些特性决定了它适合存一些不敏感的小数据，比如用户偏好设置、表单草稿、简单的缓存等。但原生API太简陋了，连个过期时间都没有，今天我们就来给它"装修"一下。

基础封装：先解决类型转换问题

原生localStorage只能存字符串，存个对象还得手动JSON.stringify，取出来又要parse，太麻烦了。咱们先解决这个痛点：

/**
 * localStorage增强版
 * @author 全栈老李
 */
const storage = {
   
  // 存数据，自动处理对象类型
  set(key, value) {
   
    if (typeof value === 'object') {
   
      value = JSON.stringify(value)
    }
    localStorage.setItem(key, value)
  },
  
  // 取数据，自动尝试JSON解析
  get(key) {
   
    let value = localStorage.getItem(key)
    try {
   
      return JSON.parse(value)
    } catch {
   
      return value
    }
  },
  
  // 删数据
  remove(key) {
   
    localStorage.removeItem(key)
  },
  
  // 清空
  clear() {
   
    localStorage.clear()
  }
}

// 使用示例
storage.set('user', {
   name: '张三', age: 25}) // 自动转字符串
const user = storage.get('user') // 自动转回对象
console.log(user.name) // 输出"张三"

这个基础版已经比原生API好用多了，但还不够。比如我想存个token，希望它2小时后自动失效，怎么办？原生localStorage可没这功能。

进阶封装：添加过期时间功能

实现思路很简单：存数据时把过期时间一起存进去，取数据时检查是否过期。过期就自动删除并返回null。