JavaScript前端中实现本地储存的常用方式绘制

一、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 核心区别对比

1.3 应用场景

Cookie

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

localStorage

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

sessionStorage

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

IndexedDB

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

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 区别

1.存储容量

APP：原生 APP 可以根据需要使用文件系统和数据库存储大量的数据，理论上只要设备存储空间允许，存储容量可以很大。例如，一些视频播放 APP 可以将大量的视频文件缓存到本地。

小程序：小程序的本地存储容量通常有限制，如微信小程序单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。这是为了避免小程序占用过多的设备存储空间。

2.数据安全性

APP：原生 APP 可以通过应用沙盒机制来保护数据的安全性，数据只能被应用本身访问。同时，还可以使用加密技术对敏感数据进行加密存储，如用户的密码、支付信息等。

小程序：小程序的数据存储在用户的设备上，但由于小程序的运行环境相对开放，数据的安全性相对较低。虽然小程序平台也会采取一些安全措施，但在处理敏感数据时仍需谨慎。

3.使用便捷性

APP：原生 APP 的存储方式相对复杂，需要掌握不同平台的存储 API 和数据库操作方法。跨平台 APP 虽然提供了统一的存储接口，但也需要了解相应的插件和使用方法。

小程序：小程序的存储 API 简单易用，开发人员可以快速上手，使用起来更加便捷。

2.5 应用场景

APP

• 大量数据存储：当应用需要存储大量的结构化数据或文件时，如电商 APP 的商品信息、音乐 APP 的歌曲文件等，适合使用数据库或文件系统进行存储。
• 复杂数据管理：对于需要进行复杂数据管理和操作的应用，如社交 APP 的用户关系管理、办公 APP 的文档管理等，使用数据库存储可以更好地满足需求。
• 敏感数据处理：当应用需要处理敏感数据时，如金融 APP 的用户账户信息、医疗 APP 的患者健康数据等，原生 APP 可以通过加密和安全机制来保证数据的安全性。

小程序

• 临时数据缓存：小程序可以将用户的浏览记录、搜索历史等临时数据存储在本地，以提高用户体验。例如，新闻小程序可以缓存用户最近浏览的新闻文章，方便用户离线阅读。
• 简单配置信息存储：对于一些简单的应用配置信息，如用户的字体大小设置、主题颜色选择等，可以使用小程序的本地存储功能进行存储。
• 快速开发场景：由于小程序的存储 API 简单易用，适合在快速开发的场景中使用，如一些简单的工具类小程序、活动推广小程序等。

以上就是JavaScript前端中实现本地储存的常用方式绘制的详细内容，更多关于前端本地储存的资料请关注脚本之家其它相关文章！

最新评论