本地存储sessionStorage 会话存储和 localStorage 永久存储

最新推荐文章于 2022-08-30 09:08:05 发布
VIP文章 最新推荐文章于 2022-08-30 09:08:05 发布
阅读量869 收藏 3
点赞数 1
分类专栏： css3 前端知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Chasidy/article/details/88659261
版权

在h5中，本地存储有两个，一个永久存储locallstorage和会话存储sesstionStorage

他们可以把一些数据存贮在浏览器端

他们的应用场景大概是有，记住用户信息，记住阅读历史等等

1.1sessionStorage 会话存储

可以在浏览器内容中存一些数据 => 字符串数据而已 不是说存视频

使用h5可以在本地存储用户的浏览器数据。

cookie 也可以存储字符串

cookie 4k

本地存储5M或者到 20M

现在可以使用本地存储 去存一些数据比如 用户的浏览器记录 用户信息等等…

两个类型

会话存储sesstionStroage

打开浏览器 -> 关闭它 这个过程就叫做会话

sesstionStroage 和以前服务器等 sesstion 没有翔升 限制 只能在同源网站中使用 百度=>数据 在谷歌 不 可以获取

可以跨页面使用 baidu a.html b.html 可以获取到a中的值

url传值 get类型 用户可以看见 会话存储用户看不见

API

存值

用途: 将value存储到key字段

setItem("key",val)

取值

用途: 获取指定key本地存储的值

   getItem("key")

删除一个值

用途: 删除key本地存储的值

 removeItem("key")

清除

用途: 清除所有的key和value

sesstionStorage.clear()

//存值
//用途 将value存储到key字段
最低0.47元/天 解锁文章
Chasidy
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
cookie、sesstionStorage、localStorage的区别
m0_54241235的博客
09-07 477
前端存储信息 浏览器
cookie、sesstion、localstorage、sesstionstorage的使用和区别
mapbar_front的博客
08-20 2531
文章目录基本概念cookie详解1、服务端写入cookie2、客户端查看cookie3、前端JS获取cookiesesstion详解1，服务端生成sesstion。2，客户端查看sesstionIdlocalStorage的使用sesstionStorage 基本概念 cookie，是在客户端（浏览器）存储少量数据的地方，通常用于存储用户数据。在客户端和服务端进行交互的时候，会携带cookie到...
在javascript中，cookie，storage，sesstion使用区别
我的博客简介
08-30 375
发的发放
Local Storage和Session Storage详解
风吹过的博客
08-06 6593
Local Storage和Session Storage详解 1. 来历 在HTML5中新加了Web Storage的储存方式，主要是为了弥补Cookie储存容量的不足。Web Storage分为Local Storage和 Session Storage。 2. 优缺点 优点 Web Storage 拓展了 cookie 的 4K 限制。 Web Storage 会可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是
From----Work：在vue中使用sesstionStorage保存页面数据
bingyue0126的博客
06-08 673
From----Work：在vue中使用sesstionStorage保存页面数据 1、先说下sessionStorage、localStorage、cookie的区别 1）localStorage：永久保存到本地，除非用户手动删除，也可以通过代码自定义的方法来删除。 优缺点：存储量大，达几十M，性能消耗也大 2）sesstionStorage：仅在浏览器窗口关闭前保存页面数据，刷新数据不丢失，浏览器窗口关闭后数据销毁 优缺点：存储小，40k左右 3）cookie：用户加载数据时保存到本地cook
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
10-19
cookie，localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同，今天小编通过本文给大家分享jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法，需要的朋友参考下吧
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
12-13
webstrange又分为：localstorage，sessionstorage和本地数据库。 接下来我就来一一介绍： 1、localstorage localstorage 的使用比较简单，方法有： 复制代码代码如下:localStorage.setItem(key,value);//保存数据...
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
12-14
使用HTML5 Web存储的localStorage和sessionStorage方式进行Web页面数据本地存储。 页面参考如下图，能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。 localStorage（本地存储）,可以长期存储数据，...
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
09-28
主要介绍了HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等,需要的朋友可以参考下
数据存储——临时存储（sessionStorage）和永久存储（localStorage）
h_jQuery的博客
05-25 1575
<!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>Do
sesstionStorage简单封装
weixin_46719229的博客
09-28 237
sesstionStorage存取函数封装 由于项目中常需用到本地storage存储，复杂的数组、对象等，每次都需要JSON.stringify()和JSON.parse()进行序列化、反序列化操作。 sessionStorage只是简单的key/value形式 不断地罗列，当存入的数据变多时显得杂乱无章，可以给数据分不同模块进行存取。 const saveSessionStorage = function(key,val){ let person = sessionStorage.getI
本地存储基本内容的介绍
--=
05-11 491
本地存储的介绍
[转]cookie、sesstion、localstorage、sesstionstorage的使用和区别
江州司马
12-05 426
文章目录 基本概念 cookie详解 1、服务端写入cookie 2、客户端查看cookie 3、前端JS获取cookie sesstion详解 1，服务端生成sesstion。 2，客户端查看sesstionId localStorage的使用 sesstionStorage 基本概念 cookie，是在客户端（浏览器）存储少量数据的地方，通常用于存储用户数据。在客户端和服务端进行交互的时候，...
localStorage sesstionStorage的使用,以及对应的生命周期
冲锋
05-02 5637
什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据。 早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上 它也可以存储大量的数据，而不影响网站的性能。 数据以键/值对存在, web网页的数据只允许该网页访问使用。 官方解释那么多，其实说白了 跟你用cookie方法一样...
JS的本地保存localStorage、sessionStorage用法总结
kerryqpw的博客
05-09 4万+
JS的本地保存localStorage、sessionStorage用法总结
h5页面使用sessionStorage滚动到上次浏览器位置《原创》
weixin_33785108的博客
12-09 903
　　前言： 　　因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求，对于原生APP来说轻而易举，毕竟自己的APP用户操作指哪打哪，但是H5该怎么做?H5就实现不了么？对于一个爱研究攻克这些前端棘手问题的我来说，我没尝试过，我是拒绝对提出需求者说实现不了，做不到之类的。 　　是什么需求呢？--需求方要求用户在一个列表页浏览时，点击一个列表进入详情页，返回要求记录用户刚刚浏览的位置，...
sessionStorage使用方法
热门推荐
我的技术博客
08-28 4万+
前段时间项目时遇到一个问题,iframe弹框中分页跳转时多选框中选中的值在跳转到第二页时数据无法保存,还好之前有前辈写过,拿着他的参考,省了我查找资料的时间,他使用的方法将数据先保存至sessionStorage,最后确定时再将数据从sessionStorage中渲染到父级页面.因为之前没有实战的经验, html5中的Web Storage包括了两种存储方式：sessionStorage和loc
sessionStorage详解
梦殇的博客
08-07 3万+
待整理 什么是sessionStorage 不同tab之间sessionStorage是否共享？sessionStorage 的数据会在同一网站的多个标签页之间共享吗？这取决于标签页如何打开 什么是会话 window.open || 点击链接打开的页面 sessionStorage是否共享？原页面和sessionstorage是否属于两个会话 什么是顶级浏览器上下文 https://html.sp...
本地数据存储 localStorage sessionStorage
最新发布
06-01
在 Web 应用程序中，我们经常需要在浏览器中保存一些数据，以便在下一次访问应用程序时可以直接读取这些数据。为了实现这个功能，Web 浏览器提供了两种本地数据存储方式：`localStorage` 和 `sessionStorage`。 `localStorage` 和 `sessionStorage` 都是浏览器提供的 JavaScript API，可以用来在浏览器中保存和读取数据。它们的主要区别在于数据的生命周期和作用域。 `localStorage` 中保存的数据是永久性的，除非用户手动清除，否则数据将一直保存在浏览器中。而 `sessionStorage` 中保存的数据只在当前会话中有效，当用户关闭浏览器窗口或标签页时，数据将被删除。 另外，`localStorage` 中保存的数据可以在不同的窗口或标签页中共享，而 `sessionStorage` 中保存的数据只能在同一个窗口或标签页中共享。 在 JavaScript 中，我们可以使用以下代码来读取和保存数据到本地存储中： ``` // 保存数据到 localStorage 中 localStorage.setItem('key', 'value') // 从 localStorage 中读取数据 const value = localStorage.getItem('key') // 从 localStorage 中删除数据 localStorage.removeItem('key') // 清空 localStorage 中的所有数据 localStorage.clear() ``` 类似地，我们可以使用 `sessionStorage` 来读取和保存数据： ``` // 保存数据到 sessionStorage 中 sessionStorage.setItem('key', 'value') // 从 sessionStorage 中读取数据 const value = sessionStorage.getItem('key') // 从 sessionStorage 中删除数据 sessionStorage.removeItem('key') // 清空 sessionStorage 中的所有数据 sessionStorage.clear() ``` 需要注意的是，`localStorage` 和 `sessionStorage` 中只能保存字符串类型的数据，如果需要保存其他类型的数据，需要先将其转换为字符串类型。例如，我们可以使用 `JSON.stringify` 方法将 JavaScript 对象转换为字符串，然后再保存到本地存储中。在读取数据时，需要使用 `JSON.parse` 方法将字符串转换为 JavaScript 对象。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值