javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 前端本地储存

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

作者：懒羊羊我小弟

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

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

1.3 应用场景

Cookie

localStorage

sessionStorage

IndexedDB

Cache API

1.4 安全性注意事项

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

二、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 小程序

微信小程序

支付宝小程序

2.4 区别

1.存储容量

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

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

2.数据安全性

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

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

3.使用便捷性

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

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

2.5 应用场景

APP

小程序

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

您可能感兴趣的文章:
阅读全文