本地存储

Cookies

最大可存储4KB

1. 基本操作

• key=value：Cookie 的键值对。
• expires：过期时间，格式为 Date 对象或 UTC 时间字符串。如果不设置，Cookie 会在会话结束时失效。
• path：指定 Cookie 的可用路径，默认为当前页面路径。
• domain：指定 Cookie 的可用域名，默认为当前域。
• secure：如果设置，Cookie 仅在 HTTPS 连接中传输。
• SameSite：控制 Cookie 的跨站请求行为，值可以是 Strict、Lax 或 None

1. 查看cookies

document.cookie = "key=value; expires=expiration; path=/; domain=yourdomain.com; secure; SameSite=Strict";

2. 读取特定key值

function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}

// 示例：获取 Cookie
const username = getCookie('username');
console.log(username); // 输出: "JohnDoe"

3. 更新 Cookies:更新 Cookie 的方法与设置 Cookie 相同。只需使用相同的键名重新设置 Cookie 的值和其他属性

// 更新 Cookie
document.cookie = "username=JaneDoe; expires=" + expires + "; path=/;";

4. 删除 Cookies:要删除 Cookie，可以将其过期时间设置为过去的时间

function deleteCookie(name) {
    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
}

// 示例：删除 Cookie
deleteCookie('username');

LocalStorage

一般最大可存储5MB

1. 增删查改

// 存储数据
localStorage.setItem('key', 'value');

// 读取数据
const value = localStorage.getItem('key');
console.log(value); // 输出: 'value'

// 删除数据
localStorage.removeItem('key');

// 清空所有数据
localStorage.clear();

2. 获取存储项的数量

const numberOfItems = localStorage.length;
console.log(numberOfItems); // 输出: 存储项的数量

3. 遍历所有键值对

for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    const value = localStorage.getItem(key);
    console.log(`${key}: ${value}`);
}

4. 存储复杂数据类型:localStorage 只能存储字符串。如果需要存储对象或数组，可以使用 JSON.stringify 和 JSON.parse

// 存储对象
const user = { name: 'John Doe', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

// 读取对象
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // 输出: 'John Doe'

5. 事件监听

window.addEventListener('storage', (event) => {
    console.log(`Key: ${event.key}, Old Value: ${event.oldValue}, New Value: ${event.newValue}`);
});

SessionStorage

一般最大可存储5MB

SessionStorage 没有 storage 事件，其他和localStorage用法一致

从a页面open b页面，b会复制a的SessionStorage，但是和a不共享，a标签需要加入rel=“opener” 而才能像window.open("同源页面")这种方式新开的页面会复制之前的sessionStorage

IndexedDB

1. 打开数据库

const request = indexedDB.open('MyDatabase', 1);

request.onupgradeneeded = function(event) {
    const db = event.target.result;
    // 创建对象存储
    const objectStore = db.createObjectStore('myStore', { keyPath: 'id' });
};

request.onsuccess = function(event) {
    const db = event.target.result;
    console.log('数据库打开成功');
};

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

2. 创建对象存储

const objectStore = db.createObjectStore('myStore', { keyPath: 'id' });

3. 添加数据:使用 add 方法向对象存储中添加数据。

const transaction = db.transaction('myStore', 'readwrite');
const objectStore = transaction.objectStore('myStore');

const request = objectStore.add({ id: 1, name: 'John Doe' });

request.onsuccess = function() {
    console.log('数据添加成功');
};

request.onerror = function() {
    console.error('数据添加失败');
};

4. 获取数据

const getRequest = objectStore.get(1);

getRequest.onsuccess = function() {
    console.log('获取的数据:', getRequest.result);
};

getRequest.onerror = function() {
    console.error('获取数据失败');
};

5. 更新数据:使用 put 方法更新对象存储中的数据

const updateRequest = objectStore.put({ id: 1, name: 'Jane Doe' });

updateRequest.onsuccess = function() {
    console.log('数据更新成功');
};

updateRequest.onerror = function() {
    console.error('数据更新失败');
};

6. 删除数据:使用 delete 方法从对象存储中删除数据

const deleteRequest = objectStore.delete(1);

deleteRequest.onsuccess = function() {
    console.log('数据删除成功');
};

deleteRequest.onerror = function() {
    console.error('数据删除失败');
};

7. 获取所有数据

const getAllRequest = objectStore.getAll();

getAllRequest.onsuccess = function() {
    console.log('所有数据:', getAllRequest.result);
};

getAllRequest.onerror = function() {
    console.error('获取所有数据失败');
};

8. 创建索引:索引的意义在于，可以让你搜索任意字段，也就是说从任意字段拿到数据记录。如果不建立索引，默认只能搜索主键（即从主键取值）

objectStore.createIndex('nameIndex', 'name', { unique: false });

9. 使用索引查询

const index = objectStore.index('nameIndex');
const indexRequest = index.get('John Doe');

indexRequest.onsuccess = function() {
    console.log('通过索引获取的数据:', indexRequest.result);
};

indexRequest.onerror = function() {
    console.error('通过索引获取数据失败');
};

10. 事务

const transaction = db.transaction('myStore', 'readwrite');

// 添加、更新或删除数据
const objectStore = transaction.objectStore('myStore');
objectStore.add({ id: 2, name: 'Alice' });
objectStore.put({ id: 1, name: 'Bob' });
objectStore.delete(3);

// 监听事务完成
transaction.oncomplete = function() {
    console.log('事务完成');
};

transaction.onerror = function() {
    console.error('事务失败');
};

11. 关闭数据库:在完成操作后，可以关闭数据库

db.close();