JS 中LocalStorage和SessionStorage的使用

下面是 JS 中LocalStorage和SessionStorage的使用攻略:

LocalStorage 和 SessionStorage 是什么?

LocalStorage 和 SessionStorage 都是 HTML5 引入的一种存储 key-value 数据的机制,在浏览器端存储数据。两者有以下不同:

  • LocalStorage 存储的数据没有过期时间,存储在本地,除非手动清除,否则永久保存;
  • SessionStorage 存储的数据只在会话期间有效,会话结束后数据被清除。

使用 LocalStorage 存储数据

LocalStorage 可以通过 localStorage 对象进行操作。以下是使用 LocalStorage 的示例:

// 存储数据
localStorage.setItem('name', '张三');
localStorage.setItem('age', '22');

// 获取数据
const name = localStorage.getItem('name');
const age = localStorage.getItem('age');

// 移除数据
localStorage.removeItem('name'); 
  • setItem(key, value):使用给定的键名(key)和值(value)存储数据到 LocalStorage 中;
  • getItem(key):获取指定键名(key)对应的数据值;
  • removeItem(key):根据给定的键名(key)清除对应的数据。

使用 SessionStorage 存储数据

SessionStorage 和 LocalStorage 的使用方式是一样的,只需要将 localStorage 替换成 sessionStorage 即可。以下是 SessionStorage 的示例:

// 存储数据
sessionStorage.setItem('name', '张三');
sessionStorage.setItem('age', '22');

// 获取数据
const name = sessionStorage.getItem('name');
const age = sessionStorage.getItem('age');

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

使用 LocalStorage 和 SessionStorage 注意事项

  • LocalStorage 和 SessionStorage 存储的数据只能是字符串类型。如果需要存储其他类型的数据(如对象、数组),需要先将其转换成字符串,再存储;
  • LocalStorage 和 SessionStorage 只能存储在当前域名下,不同域名之间的数据无法共享;
  • 存储数据时,需要注意当前 LocalStorage 和 SessionStorage 的存储容量上限,不同浏览器的限制不同,一般来说在 5MB 左右。

示例:使用 LocalStorage 存储用户登录状态

下面是示例代码,我们可以使用 LocalStorage 存储用户的登录状态:

// 登录成功后,存储用户信息
localStorage.setItem('isLogin', 'true');
localStorage.setItem('username', 'zhangsan');

// 判断用户是否已经登录
const isLogin = localStorage.getItem('isLogin');
if (isLogin === 'true') {
  console.log('用户已经登录,可以访问需要登录的页面');
} else {
  console.log('用户未登录,请先登录');
}

示例:使用 SessionStorage 存储某一会话中的数据

下面是示例代码,我们可以使用 SessionStorage 存储和读取某一次会话中的数据:

// 存储数据
sessionStorage.setItem('name', '李四');
sessionStorage.setItem('age', '25');

// 获取数据
const name = sessionStorage.getItem('name');
const age = sessionStorage.getItem('age');

console.log('姓名:'+name);
console.log('年龄:'+age);

以上就是关于 JS 中 LocalStorage 和 SessionStorage 的使用攻略,希望对你有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS 中LocalStorage和SessionStorage的使用 - Python技术站

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

相关文章

  • JS动态创建Table,Tr,Td并赋值的具体实现

    下面是“JS动态创建Table,Tr,Td并赋值的具体实现”的攻略。 实现方法 使用JavaScript可以很方便地动态创建表格,具体步骤如下: 创建一个 元素,用于存放动态创建的表格。 使用JavaScript的循环语句,例如for循环或while循环,根据需要动态创建需要的行(tr)和列(td)。 在创建每个行(tr)时,使用循环语句动态创建所需的列(t…

    JavaScript 2023年6月11日
    00
  • 用JavaScrip正则表达式验证form表单的方法

    下面是使用JavaScript正则表达式验证表单的攻略: 一、需求分析 JavaScript正则表达式可以对表单中的输入内容进行有效地验证。在使用正则表达式之前,首先需要明确以下几点: 要验证哪些内容,如表单中的用户名、密码、邮箱等; 需要验证的内容的限制条件,如密码必须包含大小写字母和数字等; 如果验证不通过,需要如何提示用户进行正确的输入。 二、编写正则…

    JavaScript 2023年6月10日
    00
  • 现代 javscript 编程 资料第2/6页

    我们来详细解析“现代JavaScript编程资料第2/6页”的完整攻略吧。 背景介绍 这份资料是介绍现代 JavaScript 编程的,旨在帮助初学者快速入门并熟练掌握现代 JavaScript 的相关技术和特性。 攻略步骤 以下是学习该资料的详细攻略步骤: 1. 熟悉资料结构 该资料的第2/6页主要介绍了以下内容: ES6 模块化 Promises 迭代器…

    JavaScript 2023年6月10日
    00
  • JavaScript中的this妙用实例分析

    讲解JavaScript中的this妙用实例分析的完整攻略如下: 什么是this 在JavaScript中,this是一个特殊的关键字,其用于指向函数运行时的上下文对象。在不同的上下文中,this指向的对象不同,因此this可以有多种用途和应用场景。 this的使用场景 1. 普通函数的调用 当函数被作为普通函数调用时,this指向window对象(全局对象…

    JavaScript 2023年5月28日
    00
  • javascript实现获取字符串hash值

    获取字符串的哈希值实际上是将字符串转换为一个数字,这个数字唯一地代表了该字符串。JavaScript中可以使用哈希算法来获取字符串的哈希值,下面是获取字符串哈希值的完整攻略。 步骤1:选定哈希函数 JavaScript中常用的字符串哈希函数有很多,比如BKDRHash、APHash、JSHash等。这里以BKDRHash为例,其实现代码如下: functio…

    JavaScript 2023年5月28日
    00
  • 如何将JS的变量值传递给ASP变量

    将JS的变量值传递给ASP变量需要借助AJAX技术来实现,具体步骤如下: 在HTML页面中引入jQuery库和ASP文件: <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script language=&…

    JavaScript 2023年6月11日
    00
  • Javascript 代码也可以变得优美的实现方法

    代码结构 在书写Javascript代码时,应该保持代码的结构清晰,统一。一个好的代码结构可以方便后续的代码维护,同时也符合阅读习惯。 在注释方面,适当的加入注释可以增加代码的可读性。注释内容应该清晰、简洁,涵盖对代码的主要解释和功能说明。 变量声明 在声明变量时,应该使用 var 或 let 关键字。其中 var 声明的变量为全局变量,而 let 声明的变…

    JavaScript 2023年5月18日
    00
  • 数组方法解决JS字符串连接性能问题有争议

    JS中字符串的连接操作会对性能产生较大的影响,特别是在大批量数据拼接时。为了解决这一问题,人们常常使用数组来临时存储数据,然后再一次性地对它们进行连接。这里整理了一些数组方法来解决JS字符串连接性能问题,同时也探讨了其中的争议点。 1. 为什么使用数组可以提升字符串连接的性能? 在JS中,字符串是不可变的,一旦创建就无法修改。因此,每次对字符串进行拼接都会创…

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