loacalStorage & sessionStorage & 前端 存储

最新推荐文章于 2024-07-06 09:30:00 发布
最新推荐文章于 2024-07-06 09:30:00 发布
阅读量95 收藏
点赞数
文章标签： 前端 javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45129599/article/details/128802732
版权

参考资料：localstorage https://www.cnblogs.com/st-leslie/p/5617130.html

首先，我们要了解 前端 调试中 F12 点击 Application 中 storage 的作用

其中有

  • local Storage
  • Session Storage
  • indexed DB
  • Web SQL
  • Cookies

目前Cookie，已经 被爆出 各种各样的安全问题，以及 Cookie 只能存储 4kb 的数据。

html5 新标准中 引入 Web Storage的一种存储方式，其中包含了 localStorage 和 sessionStorage一样都是用来存储客户端临时信息的对象

他们之间的区别

Local Storage

  • 可以持久化存储本地数据 一般浏览器可存储 5M数据，
  • 不同浏览器会不同，高版本浏览器才支持。
  • localStorage 不能被爬虫抓取到 。
  • 一般 都是存储String 格式。如果存储Json，就会比较复杂
  • 只读数据。无过期时间，手动删除。重新添加。

Session Storage

  • 仅仅是会话级别的存储本地数据，浏览器打开，会话开始，浏览器关闭，会话结束 数据销毁。

Cookies

  • 单个cookie保存的数据不能超过4kb
  • 安全性低下 cookie：针对cookie所存在的攻击：Cookie欺骗
  • 可选择 是否过期，过期的cookie会消失
  • 存储位置 根据过期更变：不设置过期时间，存储在内存中，其他存储在 硬盘中
特殊说明： 以上文章，均是我实际操作，写出来的笔记资料，不会盗用别人文章！烦请各位，请勿直接盗用！转载记得标注来源！
程序之路2020/6/3
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
本地存储（localStorage）
l_ychee的博客
03-26 1189
本地存储（localStorage） 1.概念：window对象下面的属性,html5新增的，将5M大小的数据存储本地的浏览器上面。 2.存储的位置：浏览器控制面板–application–左侧面板local Storage 3.本地存储localStorage特点： ①本地存储属于永久存储，除非手动删除。 ②html5新增的,高版本的浏览器支持。 ③目前所有的浏览器都会把localStorage...
2021-10-09 面试题:html(三) 语义化标签的理解,cookie&localStorage&sessionStorage的区别.iframe的缺点
GAARA
10-09 138
1.简述你对HTML语义化的理解 语义化标签就是用正确的标签做正确的事,这样做的好处是可以让页面富有结构性 ,让html的结构更清晰,也方便后期的维护 2.请描述一下 cookies，sessionStorage 和 localStorage 的区别 cookie是网站为了识别用户身份信息而存在本地的存储标识,cookie信息会经过http请求中在 服务器和客户端之间发送和接收,而localStorage和sessionStorage只会在本地储存 cookie的大小只有4k,localStorag
cookie、loacalStorage、SessionStorage
weixin_48062613的博客
03-17 167
对比 Cookie SessionStorage LocalSTorage 传递方式 在服务器和浏览器间传递 不会自动把数据发给服务器，存储在本地 不会自动把数据发给服务器，存储在本地 大小 4KB 5MB 5MB 有效时长 可以设置有效时长 当前浏览器关闭前有效 始终有效 会话跟踪技术： 一、cookie 特点： 有服务器创建，保存在服务端 容量不超过4K 创建过程： 使用new创建cookie对象 设置cookie对象的生命周期 将cookie对象绑定到respons
HTML5的WEB存储 loacalStorage和sessionStorage，一个比cookie更好的存储方式
lirunhui6的博客
05-08 1270
sessionStorage、localStorage和cookie之间的区别？共同点：用于浏览器端存储的缓存数据不同点：(1)、存储内容是否发送到服务器端。当设置了cookie后，数据会发送到服务器端，造成一定的宽带浪费；web storage会将数据保存到本地，不会造成资源浪费(2)、数据存储大小不同。cookie数据不能超过4k；web storage数据存储可以达到5M；(3)、存储周期不...
SessionStorage和loacalStorage区别
最新发布
kaisersama__的博客
07-06 733
SessionStorage中存储的数据在当前会话期间有效，即当页面关闭时数据将被清除。
loacalStorage设置存储时间
weixin_41953046的博客
08-23 631
1.设置缓存-有效期8小时, let setLocal = (key, value) => { var date = new Date().getTime(); const obj = { data: value, time: Date.now(), expire: date + 1000 * 60 * 60 * 8 }; localStorage.setItem(key, JSON.stringify(obj));
cookies、session、sessionStorage和localStorage解释及区别
Rerise的博客
08-15 3万+
在浏览器查看 HTML4的本地存储 cookie 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie,session等跟服务端进行数据交互。 一、cookie和session cookie和session都是用来跟踪浏览器用户身份的会话方式。 区别： 1、保持状态：cookie保存在浏览器端，session保存在服务器端 2、使用方式： （1）coo...
本地存储之sessionStorage与localStorage
shhghvvh的博客
12-06 630
目录1.本地存储的特性2.本地存储之sessionStorage(临时存储)2.1特点2.2使用方法2.2.1存储数据2.2.2获取数据 2.2.3删除数据2.2.4清空所有数据3.本地存储之localStorage(局部存储器) 3.1特点3.2使用方法3.2.1存储数据3.2.2获取数据3.2.3删除数据3.2.4清空所有数据1、数据存储在用户浏览器中2、设置、读取方便、甚至页面刷新不丢失数据3.容量较大，sessionStorage约5M、localStorage约20M4.只能存储字符串，可以将对象
【cookie/session/localstorage/sessionstorage】【前端】web中的k-v存储们有什么区别？
08-31
【cookie_session_localstorage_sessionstorage】【前端】web中的k-v存储们有什么区别
前端的存储方式（Cookie、localStorage、sessionStorage和IndexDB）
XinKun的博客
04-01 2340
一、前端存储的优势 方便网页的加载，避免了在发送请求收到响应前页面的空白期。 也可以在非强制性要求实时最新数据时减少向服务端的请求，加快渲染速度。 在网络不佳或无网络时仍有离线数据可以查看。 二、前端存储的方式： 存储大概分为两大类，一类为 存储类 ，另一类为 缓存类。 存储类： Web存储 （Web Storage）：HTML 5 中提出的存储方式，容量有 5 M。 localStorage sessionStorage Cookie：浏览器普遍支持的基于 HTTP 协议的存储方式，但容量只
JS的本地存储- sessionStorage/localStorage/数组对象的存储方式
qq_43358004的博客
05-27 2995
JS的本地存储- sessionStorage/localStorage/数组对象存储 ❤最后有你不可错过的总结的思维导图❤ 1.特性 1）sessionStroage 1.页面刷新也不会丢失数据 2.在同一个窗口/页面下数据可以共享 3.以键-值对的形式存储使用 1）localStroage 1.数据永久存储 除非手动删掉 2.在同一个窗口/页面下数据可以共享 3.以键-值对的形式存储使用 2.存储 js中数据如果要存储到浏览器需要转换为数据的类型，因为浏览器只能存储进去字符串类型。 eg:
浏览器本地存储-localStorage的介绍和使用
寻码启示
04-28 1万+
一、localStorage是什么？ 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作本地存储来的，解决了cookie占用带宽和存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage的大小，一般浏览器支持的是5M，但在不同的浏览器中会有所不同。 二、localStorage的优点和缺点 优点 1、localStorage突破了c...
local Storage使用
hober的专栏
08-04 1282
基本概念 Web Storage 中包含如下两种机制： sessionStorage 为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。 localStorage 同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在。 这两种机制是通过 Window.sessionStorage...
web本地存储（localStorage、sessionStorage）
mjzhang1993的博客
04-26 7万+
web 本地存储 （localStorage、sessionStorage）说明 对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载 loc
localStorage（本地储存）
热门推荐
blackhehaha的博客
05-11 7万+
在HTML5中，加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。它只能存储字符串格式的数据，所以最好在每次存储时把数据转换成json格式，取出的时候再转换回来。 loca...
Cookie 和 LocalStorage 比较
lttxzmj的博客
03-13 1万+
基本概念： Cookie：指某些网站为了辨别用户身份而存储在用户本地终端上的数据。 分类 内存 Cookie 由浏览器维护，保存在内存中，浏览器关闭就小时，存在时间短暂。 硬盘 Cookie 保存在硬盘中，除非用户手工清理或到了过期时间，一般不会删除。 用途 服务器可以设置或读取 Cookies 中包含的信息，借此维护用户跟服务器
cookie与storage的用法与区别
云中客的博客
07-25 6594
    在最近的新项目中，用的是vue+Element的经典组合，Element自带的存储用的是轻量级的js cookie插件：js-cookie。在浏览器中F12检查元素，之后点击Application，即可看到Local Storage、Session Storage、Cookie，可以看出，前二者的存储是由key和value(键值对)组成，而Cookie则包含名称、值、到期时间、所属域名、生...
Local Storage、Session Storage、Cookies
“罐装面包”的博客
11-15 1635
Local Storage Local Storage，也叫本地存储，是 HTML5 中新增的 web 存储的功能，它解决了客户端存储的一些缺点，并提供更强大的功能和操作API。 Local Storage 有效期：永不失效，除非 web 应用主动删除。 // 清除指定 key window.localStorage.removeItem('key') // 清除所有 window.localStorage.clear() Local Storage 作用域：Local Storage 的作用域是限定在
前端sessionStorage
11-01
sessionStorage是一种用于web浏览器中临时保存数据的客户端存储机制。它允许在同一个浏览器窗口的会话期间，保存和访问临时数据，而这些数据在用户关闭窗口或者标签页会被清除。每个sessionStorage对象都与当前的浏览器会话相关联，当会话结束时，数据也将会被删除。sessionStorage的数据仅在同一个浏览器窗口中共享，不同的窗口之间的数据是隔离的。即使在同一个域名下，不同窗口之间的sessionStorage也是独立。sessionStorage数据的生命周期限制在当前会话期间。会话期间指的是用户在同一个窗口中保持打开状态，只要用户在这个窗口中进行操作，数据就会一直保留。但一旦用户关闭了窗口或标签页，sessionStorage中的数据就会被清除。每个sessionStorage对象的存储容量通常在5M至10M之间。虽然比cookie的容易大很多，但仍然是有限制的。sessionStorage只能存储字符串类型的数据。如果需要存储其他数据类型，需要使用JSON.stringify()将其转换为字符串进行存储，再使用JSON.parse()进行读取时转换回来的数据类型。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值