JS的本地保存localStorage、sessionStorage用法总结

最新推荐文章于 2024-09-12 13:42:17 发布
最新推荐文章于 2024-09-12 13:42:17 发布
阅读量4.5w 收藏 22
点赞数 4
分类专栏： 大前端爬坑之路 文章标签： JS的本地保存 localStorage sessionStorage
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kerryqpw/article/details/71439104
版权
这篇博客总结了HTML5中的localStorage和sessionStorage的使用，包括它们的存储方式、生命周期、浏览器兼容性以及它们之间的区别。主要讨论了它们如何用于本地数据存储，特别是在减少服务器通信和用户信息保存方面的应用。同时，文章还提到了不同浏览器和页面间的共享规则，并给出了具体的代码实现示例。
摘要由CSDN通过智能技术生成

JS的本地保存localStorage、sessionStorage用法总结


         localStorage、sessionStorage是Html5的特性,IE7以下浏览器不支持

        为什么要掌握localStorage、和sessionStorage。

       JS中为了减少与服务器的通信，经常会用到保存的数据到本地的功能，

       例如本地用户信息保存。


      localStorage和sessionStorage的区别：


     (1)、localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

     (2)、他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。

     (3)、localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

             sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了

     (4)、不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面

了解本专栏 订阅专栏 解锁全文 超级会员免费看
慕容屠苏
关注
专栏目录
订阅专栏
JS的本地存储- sessionStorage/localStorage/数组对象的存储方式
qq_43358004的博客
05-27 3031
JS的本地存储- sessionStorage/localStorage/数组对象存储 ❤最后有你不可错过的总结的思维导图❤ 1.特性 1）sessionStroage 1.页面刷新也不会丢失数据 2.在同一个窗口/页面下数据可以共享 3.以键-值对的形式存储使用 1）localStroage 1.数据永久存储 除非手动删掉 2.在同一个窗口/页面下数据可以共享 3.以键-值对的形式存储使用 2.存储 js中数据如果要存储到浏览器需要转换为数据的类型，因为浏览器只能存储进去字符串类型。 eg:
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
10-19
SessionStorage的使用方法与LocalStorage几乎一致： ```javascript // 设置 sessionStorage.setItem("mycolor", "456"); sessionStorage.mycolor = '456'; // 获取 var $color = sessionStorage.getItem("mycolor...
js 本地存储（sessionStorage & localStorage）
贝la的博客
07-22 267
<body> <input type="text"> <button class="set">存储数据</button> <button class="get">获取数据</button> <button class="remove">删除数据</button> <button class="del">清空所有数据</button> &l..
【JavaScript】本地存储 --- localStorage 和 sessionStorage 详解
最新发布
lph159的博客
09-12 3200
本地存储（Local Storage）是指在用户浏览器中存储数据的方式，它允许 Web 应用程序将少量数据保存在用户设备上，方便页面之间、甚至关闭浏览器后的数据持久化。存储容量大：相比 Cookie 的 4KB 限制，和可以存储大约 5MB 的数据（具体大小因浏览器不同略有差异）。不会随着 HTTP 请求发送：与 Cookie 不同，本地存储的数据不会在每次请求时发送到服务器，从而减少了带宽的消耗。基于键值对存储：通过简单的键值对形式来存储和访问数据，使用方便。和。
JS 本地存储（localStorage和sessionStorage）
PrimaryColor
07-15 345
使用方法 localStorage和sessionStorage方法： setItem（key，value） //key为存储的键，value为存储的数据 getItem（key） //key为取数据的键。 示例： localStorage.setItem("userName","yy"); let user=localStorage.getItem("userName"); console.log(user); //结果为：yy 区别： localStorage：存储的数据当浏览器被关闭时不会被
JavaScript本地存储实践sessionStorage
我的E家
11-20 1343
目录 背景回顾 sessionstorage与localStorage对比 使用注意 使用场景 vue中sessionStorage.js封装与使用 1、sessionStorage.js的封装 2、vue其他页面使用 背景简介                  HTML5中与本地存储相关的两个重要内容：Web Storage与本地数据库。其中，Web Storage存储机制是对...
js-前端存储之sessionStorage
2301_76671906的博客
02-19 1259
sessionStorage是 Web Storage API 提供的一种客户端存储机制，用于在浏览器中保存会话级别（session-level）的数据。与localStorage不同，sessionStorage中存储的数据在用户关闭标签页或浏览器窗口时会被清除。
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
12-13
示例中的JavaScript代码演示了如何使用localStorage进行数据的保存、读取和提交。当用户点击“提交”按钮时，表单数据会被转换成JSON格式并存储到localStorage中，页面加载时则会读取存储的数据填充表单。 2. ...
js Storage 本地存储用法 LocalStorage SessionStorage
学习笔记
02-21 1479
js LocalStorage SessionStorage 客户端存储小型数据的方式有 cookie 和 storage 两种 这两种存储方式都是基于站点的，也就是说不同的站点有不同的cookie cookie 用于存储小的数据，如 username email uuid token等，并可以设置数据的过期时间 storage 可以永久存储数据，并可以用于存储相对大一些的数据，一般认为可以...
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
09-28
localStorage的基本使用方法如下： 1. **设置数据**：使用`localStorage.setItem(key, value)`方法，其中`key`是存储的键，`value`是对应的值。例如，将一个数组的元素存储到localStorage中： ```javascript for ...
JS 本地存储 sessionStorage localStorage
christmassss的博客
01-16 787
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。Application中Session Storage中可以查看到存储的数据。Application中Local Storage中可以查看到存储的数据。4、只能存储字符串，可以将对象JSON.stringify)编码后存储。2、设置、读取方便、甚至页面刷新不丢失数据。2、在同一个窗口(页面)下数据可以共享。1、数据存储在用户浏览器中。
js sessionStorage本地存储
黄大仙
08-12 1527
本地存储特性 数据存储在用户浏览器中 设置, 读取方便,甚至页面刷新数据不丢失 容量较大,sessionStorage约为5M,localStorage约为20M 只能存储字符串, 可以将对象JSON.stringify()编码后存储 window.sessionStorage 特        点 生命周期为关闭窗口 生命周期为关闭窗口 同一窗口下数据共享 以键值对形式存储 案例: html部分代...
JavaScript——localStorage和sessionStorage的使用方法
热门推荐
NanChen的博客
10-12 1万+
首先localStorage和sessionStorage都是用来存储客户端临时信息的对象。说白了就是把信息放在本地中，通常用于记住密码这一类需要实现存储数据的功能。通常我们自己写的网页每次刷新后数据就自动消失了，如何让他刷新完毕过后还保留其中用户输入的数据呢？这里就用到loaclStorage和sessionStorage方法 其两者的特点如下： 1、用来存储临时信息 2、只能存放字符串类型的对象 3、localStorage生命周期是永久 4、sessionStorage生命周期为当前窗口或标
js【详解】本地存储 Cookie、sessionStorage、localStorage
朝阳39的博客
05-16 1674
目录 Cookie、sessionStorage、localStorage的区别 Cookie的用法 安装依赖 导入依赖 使用方法 Cookie操作引用类型的数据（数组、对象等） sessionStorage的用法 localStorage的用法 Cookie、sessionStorage、localStorage的区别 特性 Cookie sessionStorage localStorage 数据有效期 可自定义失效时间，默认是关闭浏览器后失效 .
sessionStrorage保存、获取、清空等一些方法
qq_45516629的博客
06-16 2934
原文链接：https://blog.csdn.net/Allanwhy/java/article/details/89711496 sessionStrorage保存、获取、清空等一些方法 1、存值 sessionStorage[‘key’]=‘value’; sessionStorage.setItem(‘key’,‘value’); 2、取值 var v=sessionStorage[‘key’]; var f=sessionStorage.getItem(‘key’); 3、删除 sessionSt
JS中的本地存储（localStorage和sessionStorage）
weixin_42943920的博客
12-31 157
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt
vue-x储存与本地储存（localstorage、sessionstorage）
qq_37642495的博客
12-27 3421
sessionstorage 也称会话缓存，当用户关闭浏览器窗口后，数据就会被删除； localstorage 储存的数据没有时间限制，只要不删除，都会存在 vue-x 一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 用法： https://vuex.vuejs.org/zh/ 总结 1.区别：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

慕容屠苏

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值