JavaScript 本地存储详解：localStorage、sessionStorage 与 Cookie

常用的本地存储方案

JavaScript 提供的本地存储机制允许开发者在浏览器环境中持久化保存数据。

• localStorage
• sessionStorage

localStorage

特点： - 属于长期存储，除非手动删除，否则数据会一直保留在浏览器中；若清除缓存或卸载浏览器，数据将丢失。 - 支持跨页面通信，即在一个页面写入的数据可以在另一个页面读取。 保存方法： - 语法：window.localStorage.setItem(名字,值) - 注意：仅支持保存字符串类型数据，其他数据类型无法直接保存。 获取方法： - 语法：window.localStorage.getItem(名字) - 注意：保存的是字符串，读取出来的也是字符串。 - 返回值：

• 如果 localStorage 中存在该键名，则返回对应的数据值。
• 如果 localStorage 中不存在该键名，则返回 null。 删除方法： - 语法：window.localStorage.removeItem(名字) - 作用：从 localStorage 中删除指定的数据项。

// 保存
var num = 200
window.localStorage.setItem('a', num)
// 获取
var res = window.localStorage.getItem('b')
console.log(res);
console.log(typeof res);
// 删除
window.localStorage.removeItem('a')

sessionStorage

特点： - 属于会话存储，浏览器关闭后数据即失效。 - 支持跨页面通信（有特定要求）。 - 要求：必须是同一页面内的跳转才能共享数据。 保存方法： - 语法：window.sessionStorage.setItem(名字,值) - 注意：仅支持保存字符串类型数据，其他数据类型无法直接保存。 获取方法： - 语法：window.sessionStorage.getItem(名字) - 注意：保存的是字符串，读取出来的也是字符串。 - 返回值：

• 如果 sessionStorage 中存在该键名，则返回对应的数据值。
• 如果 sessionStorage 中不存在该键名，则返回 null。 删除方法： - 语法：window.sessionStorage.removeItem(名字) - 作用：从 sessionStorage 中删除指定的数据项。

// 保存
window.sessionStorage.setItem('a', 300)
// 获取
var res = window.sessionStorage.getItem('a')
console.log(res);
console.log(typeof res);
// 删除
window.sessionStorage.removeItem('a')

浏览器本地存储 - Cookie

特点：

• 只能存储字符串，具有固定的格式： => key=value; key2=value2; key3=value3
• Cookie 的存储大小有限制： => 约为 4KB
• 存储的时效性： => 默认为会话级别时效，可以手动设置过期时间。
• 操作必须依赖服务器： => 本地直接打开的页面无法操作 Cookie。 => 即无法存储，也无法读取。 => 要求页面必须在服务器环境下打开。
• 前后端交互时自动携带： => 只要 Cookie 空间中有内容， => 在该页面与后端交互的过程中会自动携带 Cookie。
• 前后端操作： => 前端可以使用 JavaScript 进行操作。 => 任何后端语言都可以操作 Cookie。
• 存储依赖域名： => 哪个域名存储的数据，只有该域名可以使用。 => 不能跨域名通信。

Cookie 的操作方法

设置一条 Cookie：

语法：document.cookie = 'key=value'

// 设置一条 cookie
// 设置了一条叫做 a 的 cookie 存储的值是 100
document.cookie = 'a=100'
// 设置了一条叫做 b 的 cookie 存储的值是 200
document.cookie = 'b=200'
// 设置一条带有过期时间的 cookie
var time = new Date()
document.cookie = 'a=100;expires=' + time
// 设置一条 30s 以后过期的 cookie
var time = new Date()
time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + 1000 * 30)
// console.log(time)
document.cookie = 'a=100;expires=' + time

获取 Cookie：

语法：document.cookie

返回值：完整的 Cookie 字符串。

console.log(document.cookie)

以上就是 JavaScript 本地存储全面解析的详细内容，更多关于 JavaScript 本地存储的资料请关注本站其它相关文章！