脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript本地存储方式

JavaScript本地存储的几种方式小结

 更新时间：2024年12月11日 11:04:13   作者：AitTech  
在 JavaScript 中,本地存储指的是将数据保存在用户的浏览器中,能够在页面刷新或关闭后仍然保留,本文给大家介绍了本地存储的几种方式,每种存储方式的特点、区别及应用场景,需要的朋友可以参考下

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

  • LocalStorage:

    • 描述: LocalStorage 是 Web Storage API 的一部分，用于在用户的浏览器中存储键值对。数据不会过期，除非用户明确删除。
    • 用法：
// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
const value = localStorage.getItem('key');

// 移除数据
localStorage.removeItem('key');

// 清除所有数据
localStorage.clear();

SessionStorage:

  • 描述: SessionStorage 也是 Web Storage API 的一部分，与 LocalStorage 类似，但它存储的数据在页面会话结束时（如用户关闭浏览器标签页）会被清除。
  • 用法:
// 存储数据
sessionStorage.setItem('key', 'value');

// 获取数据
const value = sessionStorage.getItem('key');

// 移除数据
sessionStorage.removeItem('key');

// 清除所有数据
sessionStorage.clear();

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=/";

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");
    }
  };
};

  1. Web SQL (已废弃):

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

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

以上就是JavaScript本地存储的几种方式小结的详细内容，更多关于JavaScript本地存储方式的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

最新评论