前端本地储存的方式汇总

JavaScript本地存储是Web开发中用于在客户端存储数据的重要技术，以下是常见方式及其区别和应用场景：

一、WEB浏览器本地存储方式及特点

1.1 储存方式

1. Cookie

• 存储容量：约 4KB（每个域名）。
• 生命周期：可设置过期时间；默认随会话结束失效。
• 作用域：同源页面共享。
• 访问方式：通过 document.cookie 读写，每次HTTP请求自动携带。
• 特点：支持服务器端操作（通过HTTP头），但存储效率低，易被XSS攻击。

// 设置 Cookie
function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

// 获取 Cookie
function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

// 删除 Cookie
function deleteCookie(name) {
    document.cookie = name + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

// 使用示例
setCookie('username', 'John', 7);
const username = getCookie('username');
console.log(username); 
deleteCookie('username');

2. Web Storage

• localStorage

  • 存储容量：约 5-10MB（不同浏览器）。

  • 生命周期：永久存储，需手动清除。

• 作用域：同源页面共享。

• 访问方式：同步API，键值对存储（仅支持字符串，需用JSON转换对象）。

  // 存储数据
  localStorage.setItem('key', 'value');
  // 获取数据
  const storageKey = localStorage.getItem('key');
  // 删除数据
  localStorage.removeItem('key');
  // 清除所有数据
  localStorage.clear();
  

• sessionStorage

  • 存储容量：同 localStorage。

  • 生命周期：页面会话结束（关闭标签页）即清除。

  • 作用域：仅当前标签页内共享。

  • 访问方式：同 localStorage。

    // 存储数据
    sessionStorage.setItem('key', 'value');
    // 获取数据
    const storageKey = sessionStorage.getItem('key');
    // 删除数据
    sessionStorage.removeItem('key');
    // 清除所有数据
    sessionStorage.clear();
    

3. IndexedDB

• 存储容量：动态分配，通常 50% 磁盘空间（浏览器策略限制）。
• 生命周期：永久存储，需手动清除。
• 作用域：同源页面共享。
• 访问方式：异步API，支持事务、索引和结构化数据（包括文件）。
• 特点：适合复杂查询和大数据存储，但API较复杂。

// 打开数据库
const request = indexedDB.open('myDatabase', 1);

// 数据库升级时触发
request.onupgradeneeded = function(event) {
    const db = event.target.result;
    const objectStore = db.createObjectStore('users', { keyPath: 'id' });
    objectStore.createIndex('name', 'name', { unique: false });
};

// 打开数据库成功
request.onsuccess = function(event) {
    const db = event.target.result;
    const transaction = db.transaction(['users'], 'readwrite');
    const objectStore = transaction.objectStore('users');

    // 添加数据
    const user = { id: 1, name: 'John' };
    const addRequest = objectStore.add(user);
    addRequest.onsuccess = function(event) {
        console.log('Data added successfully');
    };

    // 获取数据
    const getRequest = objectStore.get(1);
    getRequest.onsuccess = function(event) {
        const data = event.target.result;
        console.log(data);
    };

    // 关闭数据库
    transaction.oncomplete = function() {
        db.close();
    };
};

// 打开数据库失败
request.onerror = function(event) {
    console.error('Database error: ', event.target.errorCode);
};

4. Cache API

• 存储容量：动态分配，依赖浏览器限制。
• 生命周期：需手动管理（Service Worker控制）。
• 作用域：同源，用于缓存网络请求。
• 访问方式：异步API，存储请求-响应对。
• 特点：主要用于PWA离线资源缓存。

1.2 核心区别对比

特性	Cookie	localStorage	sessionStorage	IndexedDB	Cache API
容量	4KB	5-10MB	5-10MB	数百MB	动态分配
生命周期	可设置过期时间	永久	页面会话	永久	手动管理
数据格式	字符串	字符串	字符串	结构化数据、二进制	请求-响应对
访问方式	同步（自动传至服务器）	同步	同步	异步	异步
适用场景	会话管理、身份验证	长期偏好设置	临时页面数据	复杂离线应用数据	离线资源缓存

1.3 应用场景

1. Cookie

   • 用户登录状态（Session ID）。
   • 跟踪用户行为（需注意隐私合规性）。

2. localStorage

   • 长期保存的用户配置（如主题、语言）。
   • 缓存静态资源（如不常变化的JSON数据）。

3. sessionStorage

   • 单页面表单的临时保存（避免页面刷新丢失）。
   • 当前会话的临时状态（如分页参数）。

4. IndexedDB

   • 离线应用的核心数据存储（如邮件客户端、文档编辑器）。
   • 需要复杂查询的大数据集（如本地数据库）。

5. Cache API

   • PWA的静态资源离线缓存（HTML/CSS/JS/图片）。
   • 加速重复访问的资源加载。

1.4 安全性注意事项

• Cookie：优先设置 HttpOnly 和 Secure 防止XSS和中间人攻击。
• Web Storage：避免存储敏感信息，易受XSS攻击。
• IndexedDB：需处理数据加密（如用户隐私数据）。

根据需求选择合适存储方式，平衡容量、性能与安全性。

二、APP与小程序

2.1 原生APP

1. iOS

• NSUserDefaults：是一个轻量级的键值对存储系统，适合存储用户偏好设置、简单的配置信息等，例如用户是否开启夜间模式、字体大小设置等。数据存储在应用沙盒的特定文件中，使用方便，能存储基本数据类型、数组、字典等。
• Core Data：是苹果提供的一个对象图管理和持久化框架，用于管理应用程序中的数据模型。它可以将数据存储到 SQLite 数据库中，适合存储复杂的、有结构的数据，如社交应用中的用户关系、笔记应用中的笔记信息等
• File System：可以直接操作文件系统来存储和读取数据，适合存储较大的文件，如图片、音频、视频等。应用可以在应用沙盒的指定目录下创建文件，并进行读写操作。

2. Android

• SharedPreferences：以键值对的形式存储简单的数据，数据存储在 XML 文件中。常用于存储用户的登录状态、应用的配置信息等，例如用户的用户名、用户选择的主题等。
• SQLite Database：是一个轻量级的嵌入式数据库，适合存储结构化的数据，如联系人信息、任务列表等。通过 SQLiteOpenHelper 类可以方便地创建、管理和操作数据库。
• Internal Storage 和 External Storage：Internal Storage 用于在设备内部存储应用的私有数据，如应用的配置文件、临时数据等；External Storage 可用于存储一些共享的文件，如图片、下载的文件等，但需要注意权限问题。

2.2 跨平台 APP

• AsyncStorage（React Native）：是 React Native 提供的一个简单的、异步的、持久化的键值对存储系统，类似于 Web 中的 localStorage。它适用于存储少量的、简单的数据，如用户的登录令牌、应用的一些简单配置等
• SharedPreferences（Flutter 中的 shared_preferences 插件）：功能类似于 Android 的 SharedPreferences，提供了简单的键值对存储功能，方便在 Flutter 应用中存储和读取数据。
• SQLite（Flutter 中的 sqflite 插件）：可以在 Flutter 应用中使用 SQLite 数据库来存储结构化的数据，其使用方式与原生 Android 中的 SQLite 类似。

2.3 小程序

• 微信小程序
  • wx.setStorage 和 wx.getStorage：这是微信小程序提供的基本的本地存储 API，以键值对的形式存储数据。可以存储字符串、数字、对象等数据类型，适合存储用户的浏览记录、缓存的页面数据等。
  • wx.setStorageSync 和 wx.getStorageSync：是同步版本的存储和读取 API，使用起来更简单，但可能会阻塞主线程，影响性能，因此建议在数据量较小且对性能要求不高的场景下使用。
• 支付宝小程序
  • my.setStorage 和 my.getStorage：与微信小程序类似，也是以键值对的形式存储数据，可用于存储用户的偏好设置、临时数据等。
  • my.setStorageSync 和 my.getStorageSync：同步版本的存储和读取 API，使用时需注意性能问题。

2.4 区别

• 存储容量
  • APP：原生 APP 可以根据需要使用文件系统和数据库存储大量的数据，理论上只要设备存储空间允许，存储容量可以很大。例如，一些视频播放 APP 可以将大量的视频文件缓存到本地。
  • 小程序：小程序的本地存储容量通常有限制，如微信小程序单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。这是为了避免小程序占用过多的设备存储空间。
• 数据安全性
  • APP：原生 APP 可以通过应用沙盒机制来保护数据的安全性，数据只能被应用本身访问。同时，还可以使用加密技术对敏感数据进行加密存储，如用户的密码、支付信息等。
  • 小程序：小程序的数据存储在用户的设备上，但由于小程序的运行环境相对开放，数据的安全性相对较低。虽然小程序平台也会采取一些安全措施，但在处理敏感数据时仍需谨慎。
• 使用便捷性
  • APP：原生 APP 的存储方式相对复杂，需要掌握不同平台的存储 API 和数据库操作方法。跨平台 APP 虽然提供了统一的存储接口，但也需要了解相应的插件和使用方法。
  • 小程序：小程序的存储 API 简单易用，开发人员可以快速上手，使用起来更加便捷。

2.5 应用场景

• APP
  • 大量数据存储：当应用需要存储大量的结构化数据或文件时，如电商 APP 的商品信息、音乐 APP 的歌曲文件等，适合使用数据库或文件系统进行存储。
  • 复杂数据管理：对于需要进行复杂数据管理和操作的应用，如社交 APP 的用户关系管理、办公 APP 的文档管理等，使用数据库存储可以更好地满足需求。
  • 敏感数据处理：当应用需要处理敏感数据时，如金融 APP 的用户账户信息、医疗 APP 的患者健康数据等，原生 APP 可以通过加密和安全机制来保证数据的安全性。
• 小程序
  • 临时数据缓存：小程序可以将用户的浏览记录、搜索历史等临时数据存储在本地，以提高用户体验。例如，新闻小程序可以缓存用户最近浏览的新闻文章，方便用户离线阅读。
  • 简单配置信息存储：对于一些简单的应用配置信息，如用户的字体大小设置、主题颜色选择等，可以使用小程序的本地存储功能进行存储。
  • 快速开发场景：由于小程序的存储 API 简单易用，适合在快速开发的场景中使用，如一些简单的工具类小程序、活动推广小程序等。