前端存储之sessionStorage和localStorage

本文涉及的产品
.cn 域名,1个 12个月
简介: 前端存储之sessionStorage和localStorage

原文合集地址如下,有需要的朋友可以关注

本文地址

合集地址

sessionStorage

sessionStorage是一种用于web浏览器中临时保存数据的客户端存储机制。它允许在同一个浏览器窗口的会话期间,保存和访问临时数据,而这些数据在用户关闭窗口或者标签页会被清除。每个sessionStorage对象都与当前的浏览器会话相关联,当会话结束时,数据也将会被删除。

  1. 作用域:sessionStorage的数据仅在同一个浏览器窗口中共享,不同的窗口之间的数据是隔离的。即使在同一个域名下,不同窗口之间的sessionStorage也是独立。
  2. 生命周期:sessionStorage数据的生命周期限制在当前会话期间。会话期间指的是用户在同一个窗口中保持打开状态,只要用户在这个窗口中进行操作,数据就会一直保留。但一旦用户关闭了窗口或标签页,sessionStorage中的数据就会被清除。
  3. 存储容量:每个sessionStorage对象的存储容量通常在5M至10M之间。虽然比cookie的容易大很多,但仍然是有限制的。
  4. 存储类型:sessionStorage只能存储字符串类型的数据。如果需要存储其他数据类型,需要使用JSON.stringfy()将其转换为字符串进行存储,再使用JSON.parse()进行读取时转换回来的数据类型。
// 存储数据到sessionStorage
sessionStorage.setItem('username', 'John');
sessionStorage.setItem('isLoggedIn', 'true');

// 从sessionStorage读取数据
const username = sessionStorage.getItem('username'); // "John"
const isLoggedIn = sessionStorage.getItem('isLoggedIn'); // "true"

// 删除sessionStorage中的数据
sessionStorage.removeItem('username');
sessionStorage.removeItem('isLoggedIn');

// 清空sessionStorage中的所有数据
sessionStorage.clear();

localStorage

localStorage是一种用于在web浏览器中持久保存数据的客户端存储机制。它允许在浏览器保存键值对形式的数据,并且这些数据在用户关闭浏览器后任然存在。
localStorage特点:

  1. 作用域:localStorage的数据在同一个域名下是共享的,不同的窗口之间也是共享的。即使在不同的浏览器窗口或标签页中,只要它们属于同一个域名,localStorage中的数据都是可以共享的。
  2. 生命周期:localStorage中的数据在浏览器中是持久保存的,除非被显式删除,或者用户清除了浏览器缓存。即使用户关闭了浏览器窗口或标签页,localStorage中的数据仍然保留,下次用户访问网站时依然可用。
  3. 存储容易:每个域名下的localStorage对象的存储容量通常在5MB至10MB之间(不同浏览器可能有所不同)。相比于cookie和sessionStorage,localStorage的存储容量较大,适合存储较大量的数据。
  4. 存储类型: localStorage只能存储字符串类型的数据。如果需要存储其他数据类型(例如对象或数组),需要使用JSON.stringify()将其转换为字符串进行存储,再使用JSON.parse()进行读取时转换回原来的数据类型。
    举个例子:
// 存储数据到localStorage
localStorage.setItem('username', 'John');
localStorage.setItem('isLoggedIn', 'true');

// 从localStorage读取数据
const username = localStorage.getItem('username'); // "John"
const isLoggedIn = localStorage.getItem('isLoggedIn'); // "true"

// 删除localStorage中的数据
localStorage.removeItem('username');
localStorage.removeItem('isLoggedIn');

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

localStorage、sessionStorage、session的区别

cookiesessionStoragelocalStorage都是在前端用于存储数据的机制,但它们之间有一些重要的区别,主要体现在以下几个方面:

  1. 存储容量:

    • cookie:每个cookie的大小限制在4KB左右,每个域名下的cookie数量也有限制(通常为20个)。
    • sessionStorage:每个域名下sessionStorage的大小限制通常在5MB至10MB之间(不同浏览器可能有所不同)。
    • localStorage:每个域名下localStorage的大小限制通常在5MB至10MB之间(不同浏览器可能有所不同)。
  2. 生命周期:

    • cookie:可以设置过期时间,可以在过期时间之前一直存在于客户端。如果没有设置过期时间,则会话结束时cookie会被删除(即会话cookie)。
    • sessionStorage:数据在同一个会话(页面关闭前)中一直存在,关闭浏览器标签或窗口后会被清除。
    • localStorage:数据会一直存在,除非被显式删除或浏览器清除缓存。
  3. 作用域:

    • cookie:每个cookie都有域名的限制,只能在设置cookie的域名及其子域名下使用。
    • sessionStorage:数据仅限于同一个窗口(或同一个标签页)中,不同窗口或标签页之间的数据不共享。
    • localStorage:数据在同一个域名下共享,不同窗口或标签页之间的数据可以共享。
  4. 与服务器交互:

    • cookie:每次请求都会带上相应的cookie数据,因此可以用于与服务器交互,例如实现用户登录状态的保持。
    • sessionStoragelocalStorage:仅存在于客户端,不会随每次请求一起发送给服务器,只能在前端使用。
  5. 安全性:

    • cookie:由于每次请求都会带上cookie数据,如果包含敏感信息,需要特别注意安全性,并使用HttpOnlySecure等选项来增强安全性。
    • sessionStoragelocalStorage:数据仅在客户端保存,相对较安全,但不适合保存敏感信息。

根据以上的区别,可以根据具体的需求选择合适的存储方式。如果需要与服务器交互或保持登录状态等,可以使用cookie;如果仅在页面会话期间保存临时数据,可以使用sessionStorage;如果需要长期保存数据或在不同页面共享数据,可以使用localStorage

目录
相关文章
|
10月前
|
存储 前端开发 测试技术
前端代码托管:存储库管理综合指南
前端代码托管:存储库管理综合指南
142 1
|
4月前
|
存储 缓存 移动开发
前端开发中常用的存储方法(带解析)
前端存储方法包括Cookie、localStorage、sessionStorage、IndexedDB和已废弃的WebSQL。Cookie用于存储小量数据,每次请求时发送到服务器,可设置过期时间。localStorage和sessionStorage都是HTML5提供的,前者数据永久存储,后者会话关闭后清除。IndexedDB是存储大量结构化数据的数据库,支持索引和事务。WebSQL已废弃,但部分浏览器仍支持。Cache Storage用于缓存响应,提高离线访问性能,通过Service Worker控制。
|
5月前
|
存储 前端开发
开发指南018-前端存储
src/utils/qlm_store.js封装了前端存储底层函数。登录后的用户信息都是通过调用底层函数进行保存的。
|
5月前
|
存储 前端开发 JavaScript
前端代码托管:存储库管理综合指南
前端代码托管:存储库管理综合指南
117 0
|
5月前
|
存储 监控 前端开发
前端知识笔记(五)———前端密钥怎么存储,才最安全?
前端知识笔记(五)———前端密钥怎么存储,才最安全?
1140 0
|
存储 前端开发
前端学习笔记202305学习笔记第二十四天-vue3.0-路由守卫登录存储2退出
前端学习笔记202305学习笔记第二十四天-vue3.0-路由守卫登录存储2退出
41 0
|
存储 前端开发
前端学习笔记202305学习笔记第二十四天-vue3.0-路由守卫登录存储1
前端学习笔记202305学习笔记第二十四天-vue3.0-路由守卫登录存储1
44 0
|
存储 缓存 前端开发
案例13-前端对localStorage的使用分析
前端对localStorage的使用分析
|
21天前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
2月前
|
存储 前端开发 JavaScript
前端语言串讲 | 青训营笔记
前端语言串讲 | 青训营笔记
30 0
下一篇
无影云桌面