JavaScript本地储存:localStorage、sessionStorage、cookie的使用

JavaScript本地储存:localStorage、sessionStorage、cookie的使用

什么是本地储存?

在网站开发中,需要将一些数据临时储存起来。本地储存技术就是把数据储存在客户端浏览器中,这样就可以避免跨页面、跨域、跨浏览器的问题,提高网站的性能和用户体验。本地储存技术通常包括localStorage、sessionStorage和Cookies。

localStorage

localStorage是HTML5 Web Storage API中的一种,是一个基于键值对的储存系统,可以使Web应用程序在客户端持久保存数据,即使应用程序被关闭也不会丢失数据。localStorage保存的数据是永久性的,直至用户手动删除。使用localStorage,我们可以把数据储存在客户端浏览器中,每个域名都有自己的localStorage对象。储存数据的大小限制为5MB左右,一旦达到这个储存限制,可能导致数据丢失。

示例1:使用localStorage储存数据

localStorage.setItem("name", "Tom");
localStorage.setItem("age", "18");

示例2:使用localStorage获取数据

var name = localStorage.getItem("name");
var age = localStorage.getItem("age");
console.log(name, age);   // Tom, 18

sessionStorage

sessionStorage也是HTML5 Web Storage API中的一项,与localStorage类似,但不同的是,sessionStorage保存的数据是临时性的,仅在关闭当前窗口时才会清除。使用sessionStorage,我们可以将数据储存在客户端浏览器中,仅在用户关闭当前浏览器窗口后,数据才会被清除。每个窗口或标签页都拥有它们自己的sessionStorage对象,储存数据的大小与localStorage相同,不过数据是临时性的。

示例1:使用sessionStorage储存数据

sessionStorage.setItem("name", "Jerry");
sessionStorage.setItem("age", "20");

示例2:使用sessionStorage获取数据

var name = sessionStorage.getItem("name");
var age = sessionStorage.getItem("age");
console.log(name, age);   // Jerry, 20

Cookie

Cookie是一种小型文本文件,储存在客户端计算机上。Cookie是一个中间介质,用来记录用户的一些信息。网站会把用户的数据写入到客户端计算机,下次用户访问该网站时,服务器可读取这些数据,从而实现用户的个性化服务。Cookie的储存大小一般是4KB左右。

示例1:使用Cookie储存数据

document.cookie="name=Lucas; path=/";
document.cookie="age=22; path=/";

示例2:使用Cookie获取数据

var x = document.cookie;
console.log(x);   // name=Lucas; age=22

以上是本地储存技术的完整攻略,可以根据实际需求选择适当的储存方式,提高网站的性能和用户体验。

阅读剩余 26%

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript本地储存:localStorage、sessionStorage、cookie的使用 - Python技术站

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

相关文章

  • javascript移动开发中touch触摸事件详解

    JavaScript移动开发中touch触摸事件详解 1. 简介 在移动开发中,我们经常需要使用到触摸事件(touch event)。触摸事件是指用户在手机或平板电脑等触摸设备上进行的操作,这些操作包括点击、滑动、缩放等等。 在JavaScript中使用触摸事件可以为移动开发增加更丰富的交互方式,而对于大多数移动设备,touch事件已经成为了与鼠标事件等同的…

    JavaScript 2023年6月10日
    00
  • JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)

    JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE) 在HTML中,我们可以使用自定义属性来存储一些特定的数据。而在JavaScript/JS中,我们可以很方便地解析这些属性并对其进行操作。在这篇攻略中,我将向你展示如何使用JavaScript/JS处理HTML元素的自定义属性,并提供两个具体的示例。 HTML中的自…

    JavaScript 2023年6月10日
    00
  • HTML5 script元素async、defer异步加载使用介绍

    接下来我将为你详细讲解一下“HTML5 script元素async、defer异步加载使用介绍”的完整攻略。 什么是async、defer异步加载 在HTML5中,script标签有两个属性可以实现异步加载,分别是async和defer。 async属性定义了脚本是否异步加载,异步加载的脚本不会阻塞页面的加载。 defer属性定义了脚本是否延迟执行,延迟执行…

    JavaScript 2023年5月27日
    00
  • 关于js里的this关键字的理解

    关于JS中的this关键字 在JavaScript中,this关键字是一个非常重要的概念,有着不同的用法和含义。在不同的情况下它所代表的对象也不同,因此理解this的含义和使用场景显得非常重要。 this的指向 在JavaScript中,this表示当前函数的执行上下文。根据函数的调用方式不同,this指向的对象也不同。 通常来说,this的指向可以分为以下…

    JavaScript 2023年6月10日
    00
  • 全面解析vue中的数据双向绑定

    全面解析Vue中的数据双向绑定 什么是数据双向绑定? Vue是一种数据驱动的前端JavaScript框架。在Vue中,数据双向绑定是指数据的变化会自动反映在视图上,而视图的变化也会自动更新到数据上。 Vue中的数据双向绑定原理 Vue中的数据双向绑定的原理基于Object.defineProperty()API来实现。Object.definePropert…

    JavaScript 2023年6月11日
    00
  • JavaScript中的LHS和RHS分析详情

    LHS和RHS分析是 JavaScript 引擎在编译或执行期间的一个步骤,用于寻找变量的值或将值赋给变量。这里的LHS和RHS代表了赋值操作(Assignment)的左值和右值。其中LHS用于对变量的赋值操作进行操作,而RHS用于对变量取值操作进行操作。 LHS查找 LHS查找是指寻找变量的容器(Container),即变量本身。在执行代码时,如果发现变量…

    JavaScript 2023年5月28日
    00
  • JavaScript中的noscript元素属性位置及作用介绍

    JavaScript中的noscript元素属性位置及作用介绍 简介 <noscript> 元素是一种被设计用于在JavaScript不可用时,向用户展示和执行备选方案的标签。当网页靠 JavaScript 才能正常工作时,可能会遵循一种最佳实践,其中是提供一个带 message 属性的 noscript 标签,以便在不支持 JavaScript…

    JavaScript 2023年5月27日
    00
  • javascript实现实时输出当前的时间

    下面是详细讲解如何用JavaScript实现实时输出当前时间的攻略。 步骤一:获取当前时间 JavaScript内置了Date对象,可以通过该对象的各种方法获取当前系统时间。其中,可以使用new Date()方法创建一个Date对象,该对象可以返回包含当前日期和时间的Date对象。例如: let now = new Date(); 这将创建一个表示当前日期和…

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