常见的浏览器存储方式(cookie、localStorage、sessionStorage)

下面就来详细讲解一下常见的浏览器存储方式。

1. Cookie

1.1 什么是Cookie

Cookie是一种存储在用户计算机上的小型文本文件,它存储了网站的一些信息,并且可以被后续的网页访问。通常用来存储用户的个人偏好设置或者登录状态等信息。

1.2 Cookie的使用

1.2.1 设置Cookie

在JavaScript中设置Cookie可以使用document.cookie属性,该属性可以通过等号分隔的方式设置一个或多个Cookie的值。

document.cookie = "username=张三; expires=Thu, 18 Dec 2025 12:00:00 GMT";
document.cookie = "city=上海; expires=Thu, 18 Dec 2025 12:00:00 GMT";

上面的示例代码通过设置document.cookie属性来存储了两个Cookie,一个是username,值为张三;另一个是city,值为上海。其中,expires属性用于设置Cookie的过期时间,过期的Cookie将被浏览器自动删除。

1.2.2 读取Cookie

在JavaScript中读取Cookie可以使用document.cookie属性,该属性返回当前网页所有可用的Cookie信息。我们可以通过解析该字符串来获取每一个Cookie的值。

console.log(document.cookie); // 输出:username=张三; city=上海;

上述示例代码中,document.cookie返回了当前网页所有可用的Cookie信息,而console.log语句将这些信息输出到了控制台。

1.3 Cookie的应用场景

1.3.1 记录登录状态

在用户登录系统时,我们通常可以将用户的登录状态存储在Cookie中,以便用户再次访问系统时能够保持登录状态。

// 用户登录成功后设置Cookie
document.cookie = "login=true; expires=Thu, 18 Dec 2025 12:00:00 GMT; path=/";

// 用户注销时清除Cookie
document.cookie = "login=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

上述示例代码中,当用户成功登录系统时,我们通过设置login这个Cookie的值为true来标识用户已经登录。而当用户注销时,我们通过清除login这个Cookie的值来退出登录状态。

1.3.2 记录用户偏好设置

在一些网站或应用中,我们需要记录用户的偏好设置,例如网站的语言、主题等。这时候我们就可以将这些偏好设置存储在Cookie中。

// 用户选择了中文语言
document.cookie = "language=zh-CN; expires=Thu, 18 Dec 2025 12:00:00 GMT; path=/";

// 用户又改为英文语言
document.cookie = "language=en-US; expires=Thu, 18 Dec 2025 12:00:00 GMT; path=/";

上述示例代码中,我们将用户的语言设置存储在language这个Cookie中,并且设置了过期时间和路径。

2. localStorage

2.1 什么是localStorage

localStorage是HTML5提供的一种客户端存储机制,它允许网站在用户本地存储和获取数据,相比Cookie更加直观、方便、安全。

2.2 localStorage的使用

2.2.1 设置localStorage

在JavaScript中设置localStorage可以使用localStorage.setItem(key, value)方法来存储键值对,其中key表示存储时使用的键,value表示存储的值。

localStorage.setItem("username", "张三");

上述示例代码中,我们使用localStorage.setItem()方法将一个键值对{username: "张三"}存储到localStorage中。

2.2.2 读取localStorage

在JavaScript中读取localStorage可以使用localStorage.getItem(key)方法来获取指定键的值。

const username = localStorage.getItem("username");
console.log(username); // 输出:张三

上述示例代码中,我们使用localStorage.getItem()方法获取了key为username的localStorage值,并将该值赋给变量username。最后我们使用console.log()将该值输出到控制台。

2.3 localStorage的应用场景

2.3.1 记录用户选择

在一些应用中,我们需要记录用户的选择,例如用户浏览了哪些商品、购物车里有哪些商品等。这时候我们可以将这些数据存储在localStorage中。

// 用户选择了商品1和商品2
localStorage.setItem("selectedItems", JSON.stringify(["商品1", "商品2"]));

// 获取用户选择的商品
const selectedItems = JSON.parse(localStorage.getItem("selectedItems"));
console.log(selectedItems); // 输出:["商品1", "商品2"]

上述代码中,我们通过存储一个数组来记录用户选择的商品信息,并使用JSON.stringify()方法将它转换成字符串格式存储到localStorage中。当需要读取用户选择时,我们使用JSON.parse()方法将从localStorage中读取到的字符串转换为数组格式。

2.3.2 记录用户搜索历史

在一些网站或应用中,我们需要记录用户的搜索历史,以便用户下次搜索时能够更加方便,这时候我们就可以将用户的搜索历史存储在localStorage中。

// 用户搜索了"JavaScript基础教程"
let history = JSON.parse(localStorage.getItem("searchHistory")) || [];
history.push("JavaScript基础教程");
localStorage.setItem("searchHistory", JSON.stringify(history));

// 获取用户搜索历史
const searchHistory = JSON.parse(localStorage.getItem("searchHistory"));
console.log(searchHistory); // 输出:["JavaScript基础教程"]

上述代码中,我们通过存储一个数组来记录用户的搜索历史,并使用JSON.parse()方法将从localStorage中读取到的字符串转换为数组格式。当用户搜索时,我们将每一个搜索关键字追加到这个数组中,并将修改后的数组存储到localStorage中。这样用户下次搜索时,我们只需要从localStorage中读取出用户之前的搜索记录就可以了。

3. sessionStorage

3.1 什么是sessionStorage

sessionStorage与localStorage类似,也是HTML5提供的一种客户端存储机制。与localStorage不同的是,sessionStorage仅在当前会话期间(包括页面刷新和关闭)有效。

3.2 sessionStorage的使用

在JavaScript中操作sessionStorage与localStorage类似,同样提供了setItem()getItem()等方法。

// 设置sessionStorage
sessionStorage.setItem("username", "张三");

// 读取sessionStorage
const username = sessionStorage.getItem("username");
console.log(username); // 输出:张三

3.3 sessionStorage的应用场景

sessionStorage的应用场景与localStorage类似,不同之处在于它的生命周期仅限于当前会话期间。通常情况下,我们会将一些临时数据存储在sessionStorage中,例如一些临时的视图状态、表单数据等。

总结

以上就是常见的浏览器存储方式(cookie、localStorage、sessionStorage)的使用方法及应用场景。在实际开发过程中,我们需要根据具体需求选择合适的存储方式。如果需要长期存储一些数据,可以使用localStorage;如果需要在短时间内暂时存储一些数据,可以使用sessionStorage;如果需要与服务器进行交互,可以使用Cookie等。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:常见的浏览器存储方式(cookie、localStorage、sessionStorage) - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • javascript面向对象的方式实现的弹出层效果代码

    JavaScript中面向对象编程(Object-Oriented Programming,简称OOP)是一种常见的编程方式,通过将数据属性和方法封装在对象中,实现了代码的复用性、可读性和可维护性。本文将从实现弹出层效果的角度,详细讲解如何使用JavaScript面向对象的方式实现弹出层效果的代码。 构建弹出层对象 首先,我们需要创建一个弹出层对象。这个对象…

    JavaScript 2023年6月10日
    00
  • JS截取字符串的三种方法详解

    JS截取字符串的三种方法详解 在开发中,我们经常需要对字符串进行处理,其中截取字符串是一种比较常用的操作。在JavaScript中,我们通过以下三种方式来截取字符串: 使用String对象自带的slice()方法。 使用String对象自带的substring()方法。 使用String对象自带的substr()方法。 接下来,我们将详细讲解以上三种方法的使…

    JavaScript 2023年5月28日
    00
  • 区分中英文字符的两种方法(正则和charCodeAt())

    区分中英文字符是一个十分常见的需求,下面我将介绍两种常用的方法,分别是正则表达式和charCodeAt()方法。 使用正则表达式 匹配单个中文字符 要匹配单个中文字符,我们需要使用Unicode中文编码范围来进行匹配,中文字符的Unicode编码范围为\u4e00-\u9fa5。因此,我们可以使用如下的正则表达式: /^[\u4e00-\u9fa5]$/ 这…

    JavaScript 2023年6月10日
    00
  • (推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib

    S.Sams Lifexperience ScriptClassLib(以下简称 SLSC)是一个非常好的 JavaScript 函数库,它包含了许多常用的函数和类,可以帮助开发者快速创建高效且易于维护的JavaScript应用程序。 安装 你可以在官方网站 https://www.sams.com/slscl 上下载 SLSC 的最新版本,也可以使用 np…

    JavaScript 2023年6月10日
    00
  • JavaScript内置对象math,global功能与用法实例分析

    JavaScript内置对象math,global功能与用法实例分析 JavaScript是一种非常强大的编程语言,在其标准库中导入了许多内置对象,如Math和global,它们都拥有经过测试和优化过的功能,可以使得JavaScript程序变得更加高效和灵活。接下来我将详细讲解这两个内置对象的功能与用法,并且提供两条示例以便加深读者的理解。 Math对象 M…

    JavaScript 2023年5月27日
    00
  • JavaScript使用技巧精萃[代码非常实用]

    JavaScript使用技巧精萃[代码非常实用] 简介 本文将分享一些JavaScript使用技巧,这些技巧涵盖了JavaScript的各个方面,希望能够帮助读者更好地理解和使用JavaScript。 技巧列表 利用let和const声明变量 使用let和const声明变量可以避免变量提升和全局污染的问题。 示例代码: // 使用let声明变量 let a …

    JavaScript 2023年5月19日
    00
  • PHP中CURL的几个经典应用实例

    下面是详细讲解“PHP中CURL的几个经典应用实例”的完整攻略。 1. 什么是CURL? CURL是一种在网络通信中使用的工具,它支持多种网络协议,可以用来HTTP、FTP、SMTP等服务的客户端程序。在PHP中,可以使用CURL库来实现与远程服务器的数据传输。 2. 安装CURL扩展 在使用PHP中的CURL扩展之前,需要先安装CURL扩展,以确保PHP支…

    JavaScript 2023年6月11日
    00
  • 使用JavaScript在html文档内添加新的元素节点

    使用JavaScript可以在html文档内添加新的元素节点,具体的步骤如下: 选中你想要添加元素的父节点 const parent = document.querySelector(‘#parent-id’); 这里假设你已经通过HTML的id属性找到了父节点,如果你不清楚可以查看querySelector的文档。 创建新节点 const newNode …

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部