localStorage使用不止于getItem、setItem、removeItem

今天我们来聊聊js内置对象localStorage的使用，我们平时一般都是getItem、setItem和removeItem，很少接触其他的。

localStorage.getItem('info')
localStorage.setItem('info', '123')
localStorage.remoItem('info')

某天，突然有个小需求，需要我们清除local中所有以user_开头的数据，怎么办呢？显然光用removeItem是无法实现的。

那么，我们先来学习几个获取 localStorage 中所有缓存的 key的方法：

方法一：使用 for 循环

function getAllLocalStorageKeys() {
  const keys = []
  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i)
    keys.push(key)
  }
  return keys
}

// 使用
const allKeys = getAllLocalStorageKeys()
console.log(allKeys)

方法二：使用扩展运算符和 map

const keys = [...Array(localStorage.length)].map((_, i) => localStorage.key(i))
console.log(keys)

方法三：获取键值对

如果你想同时获取键和对应的值：

function getAllLocalStorageItems() {
  const items = {}
  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i)
    const value = localStorage.getItem(key)
    items[key] = value
  }
  return items
}

// 使用
const allItems = getAllLocalStorageItems()
console.log(allItems)

方法四：使用 Object.keys 的替代方法

const keys = Object.keys(localStorage)
console.log(keys)  // 这会返回所有 localStorage 的 key

方法五：封装成实用函数

class LocalStorageHelper {
  static getAllKeys() {
    return Object.keys(localStorage)
  }
  
  static getAllItems() {
    return Object.keys(localStorage).reduce((obj, key) => {
      obj[key] = localStorage.getItem(key)
      return obj
    }, {})
  }
  
  static getKeysByPrefix(prefix) {
    return Object.keys(localStorage).filter(key => key.startsWith(prefix))
  }
}

// 使用
const allKeys = LocalStorageHelper.getAllKeys()
const allItems = LocalStorageHelper.getAllItems()

示例：统计存储情况

function analyzeLocalStorage() {
  const keys = Object.keys(localStorage)
  const totalSize = keys.reduce((total, key) => {
    return total + (localStorage.getItem(key).length || 0)
  }, 0)
  
  console.log(`总条目数: ${keys.length}`)
  console.log(`总大小: ${totalSize} 字符`)
  console.log(`所有键名:`, keys)
  
  return {
    count: keys.length,
    totalSize: totalSize,
    keys: keys
  }
}

analyzeLocalStorage()

推荐使用 方法一 或 方法四，它们简单直接且兼容性好。

知道了这些方法后，清除local中所有以user_开头的数据这个需求就很简单了。

Object.keys(localStorage).forEach(key => {
  if (key.startsWith('user_')) {
    localStorage.removeItem(key)
  }	
})

最后，localStorage相关限制，我相信大家肯定也是了解的：

1. 同源策略：localStorage 受同源策略限制，只能访问当前域名下的存储
2. 数据类型：获取的 key 都是字符串类型
3. 存储限制：每个域名的 localStorage 通常有 5MB 左右的存储限制
4. 空值处理：如果 localStorage 为空，这些方法会返回空数组或空对象