JS中Json字符串+Cookie+localstorage怎么用

发布时间：2021-12-03 09:04:32 作者：小新
来源：亿速云阅读：170

# JS中Json字符串+Cookie+localStorage怎么用

## 前言

在现代Web开发中，数据存储和传输是核心需求。JSON作为轻量级数据交换格式，与浏览器端的Cookie和localStorage结合使用，能实现复杂数据的持久化和状态管理。本文将深入探讨三者的配合使用技巧。

## 一、JSON字符串基础

### 1.1 什么是JSON
JSON（JavaScript Object Notation）是一种基于文本的数据格式，采用完全独立于语言的文本格式，但使用了类似于JavaScript对象的语法。

```javascript
// JSON示例
const user = {
  "name": "张三",
  "age": 30,
  "isAdmin": true,
  "hobbies": ["阅读", "编程"]
};

1.2 JSON方法

1.2.1 JSON.stringify()

将JavaScript对象转换为JSON字符串：

const obj = { name: "李四", score: 85 };
const jsonStr = JSON.stringify(obj);
console.log(jsonStr); // "{"name":"李四","score":85}"

1.2.2 JSON.parse()

将JSON字符串转换为JavaScript对象：

const jsonStr = '{"name":"王五","active":false}';
const obj = JSON.parse(jsonStr);
console.log(obj.name); // "王五"

1.3 注意事项

循环引用的对象无法转换
函数、Symbol等特殊类型会被忽略
日期对象会转为字符串

二、Cookie的使用

2.1 Cookie基础

Cookie是服务器发送到用户浏览器并保存在本地的小型数据（通常不超过4KB）。

2.1.1 设置Cookie

document.cookie = "username=John; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

2.1.2 读取Cookie

console.log(document.cookie); // "username=John; theme=dark"

2.2 结合JSON存储

2.2.1 存储对象

const userSettings = {
  theme: "dark",
  fontSize: 14,
  lastVisit: new Date()
};

// 转换为JSON并编码
const encodedSettings = encodeURIComponent(JSON.stringify(userSettings));
document.cookie = `userSettings=${encodedSettings}; max-age=3600`;

2.2.2 读取对象

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

const savedSettings = JSON.parse(decodeURIComponent(getCookie('userSettings')));
console.log(savedSettings.theme); // "dark"

2.3 Cookie的局限性

每个域名下的Cookie数量有限（约50个）
总大小限制（约4KB）
每次HTTP请求都会携带

三、localStorage的使用

3.1 localStorage基础

localStorage是HTML5提供的本地存储方案，容量更大（通常5MB），数据不会随请求发送到服务器。

3.1.1 基本操作

// 存储
localStorage.setItem('key', 'value');

// 读取
const value = localStorage.getItem('key');

// 删除
localStorage.removeItem('key');

// 清空
localStorage.clear();

3.2 结合JSON存储

3.2.1 存储复杂数据

const shoppingCart = {
  items: [
    { id: 1, name: "商品A", quantity: 2 },
    { id: 3, name: "商品C", price: 99 }
  ],
  total: 198,
  currency: "CNY"
};

localStorage.setItem('cart', JSON.stringify(shoppingCart));

3.2.2 读取数据

const savedCart = JSON.parse(localStorage.getItem('cart'));
if (savedCart) {
  console.log(`总价: ${savedCart.total}${savedCart.currency}`);
}

3.3 高级技巧

3.3.1 自动过期实现

function setWithExpiry(key, value, expirySeconds) {
  const item = {
    value: value,
    expiry: Date.now() + expirySeconds * 1000
  };
  localStorage.setItem(key, JSON.stringify(item));
}

function getWithExpiry(key) {
  const itemStr = localStorage.getItem(key);
  if (!itemStr) return null;
  
  const item = JSON.parse(itemStr);
  if (Date.now() > item.expiry) {
    localStorage.removeItem(key);
    return null;
  }
  return item.value;
}

四、综合应用场景

4.1 用户偏好设置系统

// 保存设置
function saveUserPreferences(prefs) {
  // 短期设置用Cookie（如会话偏好）
  document.cookie = `tempPrefs=${encodeURIComponent(JSON.stringify({
    theme: prefs.theme,
    lastUpdated: new Date()
  }))}; max-age=86400`;
  
  // 长期设置用localStorage
  localStorage.setItem('userPreferences', JSON.stringify({
    fontSize: prefs.fontSize,
    notifications: prefs.notifications,
    language: prefs.language
  }));
}

// 加载设置
function loadUserPreferences() {
  const preferences = {};
  
  // 从Cookie加载临时设置
  const cookieValue = getCookie('tempPrefs');
  if (cookieValue) {
    Object.assign(preferences, JSON.parse(decodeURIComponent(cookieValue)));
  }
  
  // 从localStorage加载持久设置
  const storedPrefs = localStorage.getItem('userPreferences');
  if (storedPrefs) {
    Object.assign(preferences, JSON.parse(storedPrefs));
  }
  
  return preferences;
}

4.2 购物车实现

class ShoppingCart {
  constructor() {
    this.cart = this.loadCart();
  }
  
  loadCart() {
    // 尝试从Cookie获取（兼容无localStorage情况）
    let cart;
    const cookieCart = getCookie('shoppingCart');
    
    if (cookieCart) {
      cart = JSON.parse(decodeURIComponent(cookieCart));
    } else {
      // 从localStorage获取
      const storedCart = localStorage.getItem('shoppingCart');
      cart = storedCart ? JSON.parse(storedCart) : { items: [] };
    }
    
    return cart;
  }
  
  saveCart() {
    const cartStr = JSON.stringify(this.cart);
    
    // 同时保存到Cookie和localStorage
    document.cookie = `shoppingCart=${encodeURIComponent(cartStr)}; max-age=604800`;
    localStorage.setItem('shoppingCart', cartStr);
  }
  
  addItem(product, quantity = 1) {
    // ...添加商品逻辑
    this.saveCart();
  }
  
  // 其他方法...
}

五、安全注意事项

5.1 敏感数据处理

不要存储密码、令牌等敏感信息
必要时使用加密（如CryptoJS）

const CryptoJS = require("crypto-js");

function secureStore(key, data, secret) {
  const encrypted = CryptoJS.AES.encrypt(
    JSON.stringify(data), 
    secret
  ).toString();
  localStorage.setItem(key, encrypted);
}

function secureRetrieve(key, secret) {
  const encrypted = localStorage.getItem(key);
  if (!encrypted) return null;
  
  const bytes = CryptoJS.AES.decrypt(encrypted, secret);
  return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
}

5.2 XSS防护

始终对输出进行转义
设置HttpOnly标志（服务器端Cookie）

5.3 存储限制处理

function safeSetItem(key, value) {
  try {
    localStorage.setItem(key, value);
    return true;
  } catch (e) {
    if (e.name === 'QuotaExceededError') {
      // 处理存储空间不足
      console.warn('存储空间不足，正在清理过期数据...');
      clearExpiredItems();
      try {
        localStorage.setItem(key, value);
        return true;
      } catch (e) {
        return false;
      }
    }
    return false;
  }
}

六、性能优化

6.1 批量操作

// 批量读取
function batchGetItems(keys) {
  return keys.reduce((result, key) => {
    const value = localStorage.getItem(key);
    if (value !== null) {
      result[key] = JSON.parse(value);
    }
    return result;
  }, {});
}

// 批量写入
function batchSetItems(items) {
  Object.entries(items).forEach(([key, value]) => {
    localStorage.setItem(key, JSON.stringify(value));
  });
}

6.2 数据压缩

对于大型数据，可以考虑压缩：

import LZString from 'lz-string';

function compressAndStore(key, data) {
  const compressed = LZString.compress(JSON.stringify(data));
  localStorage.setItem(key, compressed);
}

function decompressAndLoad(key) {
  const compressed = localStorage.getItem(key);
  if (!compressed) return null;
  return JSON.parse(LZString.decompress(compressed));
}

七、浏览器兼容性

7.1 特性检测

// 检测localStorage支持
function isLocalStorageSupported() {
  try {
    const testKey = '__test__';
    localStorage.setItem(testKey, testKey);
    localStorage.removeItem(testKey);
    return true;
  } catch (e) {
    return false;
  }
}

// 回退方案
function getBestStorage() {
  return isLocalStorageSupported() ? localStorage : {
    setItem: (key, value) => {
      document.cookie = `${key}=${encodeURIComponent(value)}; max-age=31536000`;
    },
    getItem: (key) => {
      const value = getCookie(key);
      return value ? decodeURIComponent(value) : null;
    }
  };
}

结语

JSON与Cookie/localStorage的组合为前端数据管理提供了强大而灵活的解决方案。掌握它们的特性和最佳实践，可以构建出既功能丰富又用户体验良好的Web应用。在实际开发中，应根据数据敏感性、生命周期和大小需求，合理选择存储方案。

提示：现代浏览器还提供了IndexedDB等更强大的存储方案，适合存储更大量结构化数据，可作为localStorage的进阶替代方案。 “`

这篇文章总计约3150字，涵盖了JSON、Cookie和localStorage的基础知识、组合使用方法、实际应用场景以及安全性和性能方面的考虑，采用Markdown格式编写，包含代码示例和结构化标题。