当前位置: 首页 > news >正文

JavaScript本地存储的方式有哪些

在JavaScript中,有几种常用的方式可以在本地存储数据。以下是主要的几种本地存储方式:

  1. LocalStorage:

    • 描述: LocalStorage 是 Web Storage API 的一部分,用于在用户的浏览器中存储键值对。数据不会过期,除非用户明确删除。
    • 用法:
      // 存储数据
      localStorage.setItem('key', 'value');// 获取数据
      const value = localStorage.getItem('key');// 移除数据
      localStorage.removeItem('key');// 清除所有数据
      localStorage.clear();
      
  2. SessionStorage:

    • 描述: SessionStorage 也是 Web Storage API 的一部分,与 LocalStorage 类似,但它存储的数据在页面会话结束时(如用户关闭浏览器标签页)会被清除。
    • 用法:
      // 存储数据
      sessionStorage.setItem('key', 'value');// 获取数据
      const value = sessionStorage.getItem('key');// 移除数据
      sessionStorage.removeItem('key');// 清除所有数据
      sessionStorage.clear();
      
  3. Cookies:

    • 描述: Cookies 是小块的数据,由浏览器存储在用户的计算机上。它们通常用于存储会话信息或用户偏好设置,并会在每次请求时发送到服务器。
    • 用法:
      // 设置 Cookie
      document.cookie = "username=John Doe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";// 读取 Cookie
      function getCookie(name) {let cookieArr = document.cookie.split(";");for(let i = 0; i < cookieArr.length; i++) {let cookiePair = cookieArr[i].split("=");if(name == cookiePair[0].trim()) {return decodeURIComponent(cookiePair[1]);}}return null;
      }const username = getCookie("username");// 删除 Cookie
      document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
      
  4. IndexedDB:

    • 描述: IndexedDB 是一种低级 API,用于在用户的浏览器中存储大量结构化数据。它类似于 SQL 数据库,但使用的是事务性数据库模型。
    • 用法:
      // 打开数据库
      let request = indexedDB.open("myDatabase", 1);request.onupgradeneeded = function(event) {let db = event.target.result;let objectStore = db.createObjectStore("customers", { keyPath: "id" });
      };request.onsuccess = function(event) {let db = event.target.result;// 添加数据let transaction = db.transaction(["customers"], "readwrite");let objectStore = transaction.objectStore("customers");let customer = {id: 1, name: "John Doe", age: 30};objectStore.add(customer);// 读取数据let transaction = db.transaction(["customers"]);let objectStore = transaction.objectStore("customers");let request = objectStore.get(1);request.onerror = function(event) {console.log("Unable to retrieve data");};request.onsuccess = function(event) {if (request.result) {console.log(request.result.name);} else {console.log("No data found");}};
      };
      
  5. Web SQL (已废弃):

    • 描述: Web SQL 是一种早期的本地数据库技术,但已经不被推荐使用,并且在现代浏览器中逐渐被淘汰。
    • 用法: 不推荐使用,建议使用 IndexedDB 作为替代。

这些技术各有优缺点,选择哪一种取决于具体的应用场景和需求。对于简单的键值对存储,LocalStorage 和 SessionStorage 是很好的选择;对于需要存储更复杂和大量数据的情况,IndexedDB 更加合适;而 Cookies 则通常用于存储需要在服务器和客户端之间共享的信息。


http://www.mrgr.cn/news/64217.html

相关文章:

  • 基于“开源 2+1 链动 O2O 商城小程序”的门店拉新策略与流程设计
  • Linux ufw 命令详解
  • OpenHarmony-4.GPIO驱动
  • 视频 的 音频通道提取 以及 视频转URL 的在线工具!
  • Rust学习笔记_12——闭包
  • qt程序开发环境部署
  • Linux安装部署MinIO
  • 常见 CSS 选择器用法
  • 七、Go语言快速入门之函数func
  • RHCE的练习(10)
  • 【论文阅读】Associative Alignment for Few-shot Image Classification
  • 告别传统办公软件,这款编辑器让你事半功倍!
  • GEE 训练教程——ee.Image()的使用
  • 分拣线番茄分级缺陷识别图像分割系统:创新探讨教学
  • RHCE【SELinux】
  • Fake Location解除屏蔽分析
  • 《高频电子线路》—— 振荡器稳定性问题
  • 【多模态读论文系列】LLaVA论文笔记
  • C++ ----------- 栈和队列
  • 软件设计师笔记-数据结构
  • 技术周总结10.28~11.03 周日
  • 动态规划-回文串系列——1312.让字符串变成回文串的最小插入次数
  • 祖鲁法则精要
  • 实习冲刺Day11
  • 如何利用8款工具辅助建立需求管理体系
  • CAN协议