如何储存数据在本地_Javascript有哪些API-js教程-PHP中文网

如何储存数据在本地_Javascript有哪些API

夜晨

发布： 2025-12-23 21:33:25

原创

657人浏览过

JavaScript提供多种浏览器数据存储API：localStorage/sessionStorage用于字符串键值对，IndexedDB适合结构化大数据，Cache API专用于Service Worker缓存网络资源，cookie仅适用于小量凭证数据，Web SQL已废弃。

如何储存数据在本地_javascript有哪些api

在浏览器中储存数据，JavaScript 提供了几个原生 API，适用于不同场景：需要简单键值对就用 localStorage 或 sessionStorage；要存结构化、大量或带索引的数据，就用 IndexedDB；临时缓存资源可配合 Cache API（常与 Service Worker 一起用）。

localStorage 和 sessionStorage

两者都提供简单的字符串键值对存储，API 相同，区别在于生命周期：

localStorage：数据永久保存，除非手动清除（关闭标签页也不丢失）
sessionStorage：仅在当前浏览器标签页有效，关闭即清空

基本用法：

localStorage.setItem('username', 'Alice');  
const name = localStorage.getItem('username');  
localStorage.removeItem('username');

登录后复制

⚠ 注意：只能存字符串。对象需先 JSON.stringify()，读取时再 JSON.parse()。

立即学习“Java免费学习笔记（深入）”；

IndexedDB：浏览器的“本地数据库”

适合存大量结构化数据（如离线消息、用户文档、图片 blob），支持事务、索引、查询，但 API 较底层、异步。

用 window.indexedDB.open() 打开或创建数据库
通过 objectStore 存取数据，类似表；可用 index 加速按非主键字段查询
所有操作基于请求对象（IDBRequest），靠事件回调（onsuccess/onerror）处理结果

例子：添加一条用户记录

Android 本地数据存储中文WORD版

本文档主要讲述的是Android 本地数据存储；对于需要跨应用程序执行期间或生命期而维护重要信息的应用程序来说，能够在移动设备上本地存储数据是一种非常关键的功能。作为一名开发人员，您经常需要存储诸如用户首选项或应用程序配置之类的信息。您还必须根据一些特征（比如访问可见性）决定是否需要涉及内部或外部存储器，或者是否需要处理更复杂的、结构化的数据类型。跟随本文学习 Android 数据存储 API，具体来讲就是首选项、SQLite 和内部及外部内存 API。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以

查看详情

const request = indexedDB.open('myApp', 1);  
request.onupgradeneeded = e => {  
  const db = e.target.result;  
  if (!db.objectStoreNames.contains('users')) {  
    db.createObjectStore('users', { keyPath: 'id' });  
  }  
};  
request.onsuccess = e => {  
  const db = e.target.result;  
  const tx = db.transaction('users', 'readwrite');  
  const store = tx.objectStore('users');  
  store.add({ id: 1, name: 'Bob' });  
};

登录后复制

Cache API：专为网络资源缓存设计

不是通用数据存储，而是配合 Service Worker 缓存 HTTP 请求/响应（如 HTML、CSS、图片），实现离线访问或加速加载。

需在 Service Worker 环境中使用（不能直接在页面脚本调用）
通过 caches.open('cache-name') 获取缓存实例
用 put()、match()、delete() 管理缓存项

示例：缓存一个首页请求

// 在 service-worker.js 中  
self.addEventListener('install', e => {  
  e.waitUntil(  
    caches.open('v1').then(cache =>  
      cache.add('/')  
    )  
  );  
});

登录后复制