在JavaScript中，本地存储是一种在用户的浏览器上存储数据的方式，它允许网页在不与服务器进行额外数据传输的情况下保留跨会话信息。主要有三种本地存储方式：sessionStorage、localStorage、cookie与indexDB。
sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除，也就是说sessionStorage只存在于窗口(页面)活跃期，一旦窗口关闭，sessionStorage将会删除数据。
sessionStorage的方法有以下几个
sessionStorage实例：
// 添加数据
window.sessionStorage.setItem("name","李四")
window.sessionStorage.setItem("age",18)
// 获取数据
console.log(window.sessionStorage.getItem("name")) // 李四
// 清除某个数据
window.sessionStorage.removeItem("gender")
// 清空所有数据
window.sessionStorage.clear()localStorage是HTML5中引入的技术，用于在用户的浏览器上长期存储数据，直到用户手动删除。与sessionStorage类似，但localStorage存储的数据没有过期时间。它同样提供了setItem、getItem、removeItem和clear方法来操作数据。
localStorage的方法有以下几个
// 存储数据
localStorage.setItem("name", "张三");
localStorage.setItem("age", 20);
localStorage.setItem("gender", "男");
// 获取数据
console.log(localStorage.getItem("name")); // 输出: 张三
// 删除数据
localStorage.removeItem("gender");
// 清除所有数据
localStorage.clear();localStorage还可以通过添加时间戳和过期时间来手动设置数据的失效时间。由于localStorage只能存储字符串，因此在存储对象时需要将其转换为JSON字符串，并在读取时解析。
Storage.prototype.setExpire = (key, value, expire) => {
let obj = {
data: value,
time: Date.now(),
expire: expire
};
//localStorage 设置的值不能为对象,转为json字符串
localStorage.setItem(key, JSON.stringify(obj));
}
Storage.prototype.getExpire = key => {
let val = localStorage.getItem(key);
if (!val) {
return val;
}
val = JSON.parse(val);
if (Date.now() - val.time > val.expire) {
localStorage.removeItem(key);
return null;
}
return val.data;
}
//使用方法
localStorage.setExpire('userId','zhangsan',5000);
window.setInterval(()=>{
console.log(localStorage.getExpire("userId"));
},1000)通过访问document.cookie可以对cookie进行创建，修改与获取。默认情况下，cookie 在浏览器关闭时删除，你还可以为 cookie的某个键值对 添加一个过期时间，如果设置新的cookie时，某个key已经存在，则会更新这个key对应的值，否则他们会同时存在cookie中
// 设置cookie document.cookie = "username=orochiz" document.cookie = "age=20" // 读取cookie var msg = document.cookie console.log(msg) // username=orochiz; age=20 // 添加过期时间（单位：天） var d = new Date() // 当前时间 2019-9-25 var days = 3 // 3天 d.setDate(d.getDate() + days) document.cookie = "username=orochiz;"+"expires="+d // 删除cookie （给某个键值对设置过期的时间） d.setDate(d.getDate() - 1) console.log(document.cookie)
class DBOpration{
constructor() {
this.db = null
}
getType(val) {
let type = typeof val == 'object'
return type
}
// 打开数据库
open(parm) {
return new Promise((res, rej) => {
let request = window.indexedDB.open(parm.dbName, parm.versions)
request.onerror = function(event) {
console.log(event)
// 错误处理
rej()
console.log(' 打开数据库报错')
}
request.onsuccess = event => {
this.db = request.result
console.log('打开数据库成功')
res()
// 成功处理
}
// 数据库更新时的回调
request.onupgradeneeded = event => {
this.db = event.target.result
this.createdDB(parm)
}
})
}
// 创建库表
createdDB(parm) {
console.log(parm)
if (!this.db.objectStoreNames.contains(parm.objName)) {
this.db.createObjectStore(parm.objName, {
keyPath: 'id'
})
// objectStore.createIndex("data", "data", { unique: false });
// unique name可能会重复
}
}
// 新增（不需要使用）
async add(parm = { dbName, objName, param, response }) {
await this.open(parm)
// await this.upgrade(dbName);
return new Promise((res, rej) => {
let type = this.getType(parm.param)
let type1 = this.getType(parm.response)
let transaction = this.db.transaction([parm.objName], 'readwrite')
let objectStore = transaction.objectStore(parm.objName)
// 用户读取数据，参数是主键
let request = objectStore.add({
id: type ? JSON.stringify(parm.param) : parm.param,
data: type1 ? JSON.stringify(parm.response) : parm.response
})
console.log(request)
request.onsuccess = function(event) {
res(event)
console.log('数据写入成功')
}
request.onerror = function(event) {
rej()
console.log('数据写入失败')
}
})
}
// 读取库表数据
async read(parm = { dbName, objName, param, response }) {
await this.open(parm)
return new Promise((res, rej) => {
let type = this.getType(parm.param)
var transaction = this.db.transaction([parm.objName])
var objectStore = transaction.objectStore(parm.objName)
// 用户读取数据，参数是主键
var request = objectStore.get(type ? JSON.stringify(parm.param) : parm.param)
request.onerror = function(event) {
console.log('事务失败')
rej()
}
request.onsuccess = function(event) {
if (request.result) {
let data = JSON.parse(request.result.data)
res(data)
} else {
res(request.result)
console.log('未获得数据记录')
}
}
})
}
// 修改库表数据,但是因为创建数据库时直接创建了库表,所以无论是添加还是修改都掉这个就可以了.
async update(parm = { dbName, objName, param, response }) {
await this.open(parm)
return new Promise((res, rej) => {
let type = this.getType(parm.param)
let type1 = this.getType(parm.response)
console.log(parm)
var request = this.db
.transaction([parm.objName], 'readwrite')
.objectStore(parm.objName)
.put({
id: type ? JSON.stringify(parm.param) : parm.param,
data: type1 ? JSON.stringify(parm.response) : parm.response
})
request.onsuccess = function(event) {
res()
console.log('数据更新成功')
}
request.onerror = function(event) {
rej()
console.log('数据更新失败')
}
})
}
// 删除某个表的数据
async remove(parm = { dbName, objName, param, response }) {
await this.open(parm)
return new Promise((res, rej) => {
let type = this.getType(parm.param)
var request = this.db
.transaction([parm.objName], 'readwrite')
.objectStore(parm.objName)
.delete(type ? JSON.stringify(parm.param) : parm.param)
request.onsuccess = function(event) {
res()
console.log('数据删除成功')
}
})
}
}
let db=new DBOpration()//创建数据库实例
//接下来增删改查调取对应的方法就行cookie，适用于标记用户与跟踪用户行为
localStorage，适用于长期保存用户的本地数据，比如token
sessionStorage,适合敏感账号一次性登录
indexDB，适合存储大量结构化数据，比如富文本编辑器的编辑历史保存等
cookie数据在每次HTTP请求中都会被发送到服务器，而sessionStorage和localStorage仅在本地保存。
cookie数据大小限制为4KB，而sessionStorage和localStorage可以达到5MB或更大。
sessionStorage仅在当前会话有效，localStorage始终有效，cookie则在设置的过期时间之前有效。
sessionStorage不在不同的浏览器窗口中共享，而localStorage和cookie在所有同源窗口中共享。
本地存储提供了一种方便的方式来持久化用户数据，但需要注意的是，它们都遵循同源策略，不同的网站之间不能共用相同的存储空间。此外，由于localStorage和sessionStorage仅支持字符串类型的存储，因此在存储非字符串类型的数据时需要进行类型转换。
以上就是javascript中本地存储的4种方式及用法与使用场景汇总的详细内容，更多关于javascript中本地存储的4种方式及用法的资料请关注本站其它相关文章！