【JavaScript】本地储存的方式cookie、LocalStorage、SessionStorage、IndexedDB

半花
202 阅读4分钟

本地存储方式

  1. Cookie：

    • Cookie 是一种存储在用户本地终端上的数据，它包含了每次用户访问网站时的信息。
    • 优点：简单易用，支持跨页面请求。
    • 缺点：存储量小（一般4KB），且每次HTTP请求都会携带Cookie，影响性能。
    • 目的：辨别用户身份
    • 案例：
  • 用户登录状态：在用户登录成功后，服务器可以在响应中设置一个包含用户身份信息的Cookie（如session ID）。之后每次用户发起请求时，都会携带这个Cookie，服务器可以根据这个Cookie验证用户的身份。
  • 记住我功能：为了方便用户下次访问时不需要重新登录，可以设置一个长期有效的Cookie来记住用户的登录状态。
// 伪代码，实际上你可能需要根据你的后端框架来设置Cookie  
res.setHeader('Set-Cookie', 'userId=12345; Path=/; HttpOnly');

function getCookie(name) {  
    let cookieValue = null;  
    if (document.cookie && document.cookie !== '') {  
        const cookies = document.cookie.split(';');  
        for (let i = 0; i < cookies.length; i++) {  
            const cookie = jQuery.trim(cookies[i]);  
            if (cookie.substring(0, name.length + 1) === (name + '=')) {  
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));  
                break;  
            }  
        }  
    }  
    return cookieValue;  
}  
  
const userId = getCookie('userId');  
console.log(userId); // 输出: 12345

  1. LocalStorage：

    • LocalStorage 是 Web 存储 API 的一部分，提供了在用户的浏览器中存储数据的能力，没有时间限制。
    • 优点：存储量大（一般5MB），数据存储在客户端，不随服务器请求发送，减少带宽消耗。
    • 缺点：数据存储在浏览器中，可能被用户清除，且存在浏览器兼容性问题。
    • 案例说明：
  • 保存用户偏好设置：如用户选择的主题颜色、字体大小等个性化设置可以保存在 LocalStorage 中，以便在用户再次访问时提供个性化的体验。
  • 购物车信息：用户的购物车信息可以临时保存在 LocalStorage 中，直到用户完成购买过程。
//设置LocalStorage
	localStorage.setItem('theme', 'dark');

//读取LocalStorage
	const theme = localStorage.getItem('theme');  
	console.log(theme); // 输出: dark

  1. SessionStorage：

    • SessionStorage 类似于 LocalStorage，但数据仅在当前会话期间有效，会话结束时数据会被清除。
    • 优点：数据不会随HTTP请求发送到服务器，减少带宽消耗；会话结束时自动清除数据，减少安全隐患。
    • 缺点：数据仅在当前会话有效，且存在浏览器兼容性问题。
    • 案例说明：
  • 记住用户登录状态：与 Cookie 类似，但 SessionStorage 不会将数据发送到服务器，增加了安全性。在登录成功后，可以将用户信息保存在 SessionStorage 中，以便在当前会话期间进行身份验证。
  • 页面间数据共享：在单页应用（SPA）中，可以使用 SessionStorage 在不同的页面或组件间共享数据，而不需要通过服务器进行传递。
//设置SessionStorage
	sessionStorage.setItem('userId', '12345');

//读取SessionStorage
	const userId = sessionStorage.getItem('userId');  
	console.log(userId); // 输出: 12345

  1. IndexedDB：

    • IndexedDB 是一个低级的API，用于客户端存储大量结构化数据，包括文件/blobs。它使用索引来高效检索数据。
    • 优点：支持大量数据存储，支持事务处理，可以创建复杂的查询。
    • 缺点：API较为复杂，学习曲线较陡峭。
    • 案例说明：
  • 离线应用数据存储：对于需要离线访问的应用，如音乐播放器、阅读器等，可以使用 IndexedDB 存储大量数据，以便在没有网络连接时也能提供功能。
  • 游戏数据存储：在Web游戏中，可以使用 IndexedDB 存储游戏进度、用户成就等数据，以便在用户下次访问时恢复游戏状态。

区别

1、存储大小：LocalStorage和SessionStorage（大于5M或者更大）大于cookie（一般不超过4K）

2、有效时间:

(1)LocalStorage:存储持久信息，浏览器关闭后不会主动删除数据除非主动删除数据

(2)SessionStorage：数据在当前浏览器，浏览器关闭后自动删除

(3)cookie有效时间之前一直有效，即使浏览器关闭

应用场景

1、cookie：标记用户和跟踪用户的行为情况（验证用户身份）

2、LocalStorage：适合长期保存在本地的数据（令牌）

3、SessionStorage：敏感账号一次性登录

4、IndexedDB：存储大量数据的情况、在线文档（富文本编辑器）保存编辑历史的情况

avatar
文章
阅读
粉丝