在JavaScript中,本地保存数据主要有以下几种方式:
基础概念:
优势:
应用场景:
示例代码:
// 设置cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
// 读取cookie
function getCookie(name) {
let value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}
// 删除cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
基础概念:
优势:
应用场景:
示例代码:
// 设置数据
localStorage.setItem('username', 'John Doe');
// 读取数据
const username = localStorage.getItem('username');
// 删除数据
localStorage.removeItem('username');
// 清空所有数据
localStorage.clear();
基础概念:
优势:
应用场景:
示例代码:
// 设置数据
sessionStorage.setItem('username', 'John Doe');
// 读取数据
const username = sessionStorage.getItem('username');
// 删除数据
sessionStorage.removeItem('username');
// 清空所有数据
sessionStorage.clear();
基础概念:
优势:
应用场景:
示例代码:
// 打开数据库
const request = indexedDB.open('myDatabase', 1);
request.onupgradeneeded = function(event) {
const db = event.target.result;
const objectStore = db.createObjectStore('users', { keyPath: 'id' });
objectStore.createIndex('username', 'username', { unique: false });
};
request.onsuccess = function(event) {
const db = event.target.result;
const transaction = db.transaction(['users'], 'readwrite');
const objectStore = transaction.objectStore('users');
const request = objectStore.add({ id: 1, username: 'John Doe' });
request.onsuccess = function() {
console.log('User added successfully');
};
};
通过以上几种方式,可以根据具体需求选择合适的本地数据存储方案。
腾讯云存储专题直播
腾讯云数据湖专题直播
企业创新在线学堂
腾讯云GAME-TECH沙龙
企业创新在线学堂
Global Day LIVE
云端大讲堂
停课不停学第四期
腾讯云数据湖专题直播
小程序·云开发官方直播课(数据库方向)
领取专属 10元无门槛券
手把手带您无忧上云