JavaScript中，我们可以使用浏览器的本地存储来保存数据。这对于提升用户体验和服务端性能有非常大的作用。本文将探讨JavaScript中的本地存储技巧。
一、localStorage和sessionStorage
在浏览器端，localStorage 和 sessionStorage 是两个非常常用的本地存储方式。它们都可以独立存储至少5MB的数据，并支持增删改查操作。
//localStorage的使用方法
localStorage.setItem('name', 'John');
console.log(localStorage.getItem('name')); //John
localStorage.removeItem('name');
//sessionStorage的使用方法
sessionStorage.setItem('name', 'John');
console.log(sessionStorage.getItem('name')); //John
sessionStorage.removeItem('name');
这里需要注意的是，localStorage与sessionStorage之间的区别在于后者的存储内容仅限于用户会话（session）期间，当用户关闭浏览器窗口后，存储的数据将被清除。
二、cookie
除了localStorage和sessionStorage，JavaScript还有一种常用的本地存储方式是cookie。cookie是一小段文本信息，存储在浏览器端，以便下次访问时读取信息。cookie具有以下特点：
- 每个cookie的最大大小约为4kb。
- 每个域名下最多可以存储20个cookie。
- cookie可以设置过期时间。
- cookie可以被JS直接读取。
//设置cookie
document.cookie = "username=John; expires=Tue, 19 Jan 2038 03:14:07 UTC; path=/"
//读取cookie
function getCookie(cname) {
const name = cname + "=";
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);
}
if(c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
//删除cookie
function deleteCookie(cname) {
document.cookie = `${cname}=''; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`
}
三、IndexDB
如果需要存储更多数据，我们可以使用IndexDB。IndexDB是一种以对象存储为基础的高级本地存储技术，可以存储大量结构化数据，支持离线访问。
//打开数据库
const request = window.indexedDB.open('myDB', 1)
let db
request.onerror = function(event) {
console.error('Database error: ' + event.target.errorCode);
};
request.onsuccess = function(event) {
db = event.target.result;
};
//创建对象仓库
const objectStore = db.createObjectStore('users', { keyPath: 'id' });
//添加数据
const tx = db.transaction(['users'], 'readwrite');
const store = tx.objectStore('users');
const user1 = { id: 1, name: 'John', age: 28 };
store.add(user1);
//查询数据
const tx = db.transaction(['users'], 'readonly');
const store = tx.objectStore('users');
const request = store.get(1);
request.onsuccess = function() {
console.log(request.result);
};
//更新数据
const tx = db.transaction(['users'], 'readwrite');
const store = tx.objectStore('users');
const request = store.get(1);
request.onsuccess = function() {
const data = request.result;
data.age++;
store.put(data);
};
//删除数据
const tx = db.transaction(['users'], 'readwrite');
const store = tx.objectStore('users');
store.delete(1);
四、总结
本文介绍了JavaScript在本地存储方面的几种方式：localStorage和sessionStorage，cookie和IndexDB。每种本地存储技术都有其适用的场景，需要视具体情况而定。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/192230.html
微信扫一扫 
支付宝扫一扫 