本地存储技术

Cookie（1994）→ Web Storage（2008）→ IndexedDB（2011）→ Cache API（2015）
  4KB              5-10MB               250MB+             无限制

Set-Cookie: token=abc123; Path=/; Max-Age=3600; HttpOnly; Secure; SameSite=Lax

import axios from 'axios'

const http = (params) => {
  const instance = axios.create({ baseURL: 'https://example.com' })
  const token = localStorage.getItem('token')

  return instance({
    url: '/api/data',
    method: 'post',
    data: params,
    headers: { 'x-token': token }  // 手动设置请求头
  })
}

// 设置
document.cookie = 'name=juejin; path=/; max-age=3600; SameSite=Lax; Secure'

// 读取（返回所有 Cookie 字符串，需手动解析）
console.log(document.cookie)

// 删除（设置过期时间）
document.cookie = 'name=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT'

import Cookies from 'js-cookie'

Cookies.set('name', 'juejin', { domain: 'example.com' })
Cookies.get('name')       // 'juejin'
Cookies.remove('name')

// 存储数据
localStorage.setItem('user_name', 'xiuyan')
localStorage.setItem('user_info', JSON.stringify({ id: 1, role: 'admin' }))

// 读取数据
const name = localStorage.getItem('user_name')
const info = JSON.parse(localStorage.getItem('user_info'))

// 删除某条数据
localStorage.removeItem('user_name')

// 清空所有数据
localStorage.clear()

// 获取存储数量
console.log(localStorage.length)

// 按 index 获取 key
console.log(localStorage.key(0))

localStorage.setItem('age', 18)
localStorage.getItem('age')  // '18'（字符串，非数字）

// 存储对象不序列化 → [object Object]
localStorage.setItem('obj', { a: 1 })
localStorage.getItem('obj')  // '[object Object]'

// 正确做法：序列化存储
localStorage.setItem('obj', JSON.stringify({ a: 1 }))
JSON.parse(localStorage.getItem('obj'))  // { a: 1 }

const storage = {
  set(key, value, duration) {
    const data = {
      value,
      expiryTime: !duration || isNaN(duration)
        ? 0
        : Date.now() + parseInt(duration)
    }
    localStorage.setItem(key, JSON.stringify(data))
  },

  get(key) {
    const data = JSON.parse(localStorage.getItem(key))
    if (data && data.expire) {
      // 过期则删除并返回 null
      if (Date.now() > data.expire) {
        localStorage.removeItem(key)
        return null
      }
      return data.value
    }
    return data
  }
}

// 使用
storage.set('userinfo', { name: 'juejin', age: 18 }, 3600000)  // 1小时过期
storage.get('userinfo')  // { name: 'juejin', age: 18 }

window.addEventListener('storage', (event) => {
  console.log(`Key: ${event.key}`)
  console.log(`Old Value: ${event.oldValue}`)
  console.log(`New Value: ${event.newValue}`)
  console.log(`URL: ${event.url}`)
  console.log(`Storage: ${event.storageArea}`)
})

IndexedDB
├── Database（数据库）
│   └── Object Store（对象仓库，类似"表"）
│       ├── Key（主键，唯一标识记录）
│       ├── Value（存储的数据，可以是任意结构化数据）
│       └── Index（索引，加速查询）
└── Transaction（事务，保证操作的原子性）

const request = indexedDB.open('myDatabase', 1)

request.onerror = () => console.error('IndexedDB 打开失败')

// 版本变化时触发（新建或版本号升级）
request.onupgradeneeded = (event) => {
  const db = event.target.result
  if (!db.objectStoreNames.contains('users')) {
    const store = db.createObjectStore('users', {
      keyPath: 'id',
      autoIncrement: true
    })
    // 创建索引（索引名、索引属性、配置）
    store.createIndex('nameIndex', 'name', { unique: false })
    store.createIndex('emailIndex', 'email', { unique: true })
  }
}

request.onsuccess = (event) => {
  const db = event.target.result
  console.log('数据库打开成功')
}

function addData(db, data) {
  const transaction = db.transaction(['users'], 'readwrite')
  const store = transaction.objectStore('users')
  const request = store.add(data)

  request.onsuccess = () => console.log('写入成功')
  request.onerror = () => console.error('写入失败')

  transaction.oncomplete = () => console.log('事务完成')
}

addData(db, { name: '张三', email: 'zhangsan@example.com', age: 25 })

// 按主键查询
function getData(db, id) {
  const transaction = db.transaction(['users'], 'readonly')
  const store = transaction.objectStore('users')
  const request = store.get(id)

  request.onsuccess = () => {
    console.log('查询结果:', request.result)
  }
}

// 按索引查询
function getByIndex(db, name) {
  const transaction = db.transaction(['users'], 'readonly')
  const store = transaction.objectStore('users')
  const index = store.index('nameIndex')
  const request = index.get(name)

  request.onsuccess = () => {
    console.log('索引查询结果:', request.result)
  }
}

// 更新（put 方法：存在则更新，不存在则新增）
function updateData(db, data) {
  const transaction = db.transaction(['users'], 'readwrite')
  const store = transaction.objectStore('users')
  store.put(data)
}

// 删除
function deleteData(db, id) {
  const transaction = db.transaction(['users'], 'readwrite')
  const store = transaction.objectStore('users')
  store.delete(id)
}

function cursorGetAll(db) {
  const transaction = db.transaction(['users'], 'readonly')
  const store = transaction.objectStore('users')
  const request = store.openCursor()
  const results = []

  request.onsuccess = (event) => {
    const cursor = event.target.result
    if (cursor) {
      results.push(cursor.value)
      cursor.continue()  // 移动到下一条
    } else {
      console.log('所有数据:', results)
    }
  }
}

import { openDB } from 'idb'

const db = await openDB('myDatabase', 1, {
  upgrade(db) {
    db.createObjectStore('users', { keyPath: 'id' })
  }
})

// 写入
await db.add('users', { id: 1, name: '张三', email: 'zhangsan@example.com' })

// 读取
const user = await db.get('users', 1)

// 更新
await db.put('users', { id: 1, name: '李四', email: 'lisi@example.com' })

// 删除
await db.delete('users', 1)

// 遍历
const allUsers = await db.getAll('users')

if (!('indexedDB' in window)) {
  console.log('浏览器不支持 IndexedDB')
  // 降级到 Web Storage
}

需要存储什么？
├── 少量文本（< 4KB）+ 服务端需读取 → Cookie
│   └── 需防 XSS → HttpOnly + Secure + SameSite
├── 简单键值对（< 10MB）+ 不需要服务端 → Web Storage
│   ├── 需要跨会话保持 → localStorage
│   └── 仅当前会话 → sessionStorage
├── 结构化数据 / 大文件 / 需要索引查询 → IndexedDB
└── HTTP 缓存替代方案 → Cache API（配合 Service Worker）