本地数据local storage和session storage
随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据, HTML5规范提出了相关解决方案。
本地存储特性
1、数据存储在用户浏览器中
2、设置、读取方便、甚至页面刷新不失数据
3、容量较大, 储存大小约为5MB
4、只能存储字符串,可以将对象JSON.stringifyO编码后存储
先说一下sessionStorage和localStorage两者的区别
前者是一个前端概念,可以将一部分数据在当前会话中保存下来,刷新页面数据依然存在,但关闭页面或者浏览器后数据会被清空。
后者本地存储除非被手动清除否则永久保存
这两者也有相同点,它们存放的数据大小一般为5MB且都是仅在客户端(即浏览器)中保存,不参与和服务器的通信
window.sessionStorage
1.生命周期为关闭浏览器窗口
2.在同一个窗口(页面)下数据可以共享
3.以键值对的形式储存使用
存储数据:window.sessionStorage(key,value)
保存数据语法:
sessionStorage.setItem("key", "value");
读取数据语法:
var lastname = sessionStorage.getItem("key");
删除指定键的数据语法:
sessionStorage.removeItem("key");
删除所有数据:
sessionStorage.clear();
window.localStorage
1.生命周期永久生效,除非手动删除否则关闭页面也会存在
2、可以多窗口(同一浏览器可以共享)
3.以键值对的形式存储使用
保存数据语法:
localStorage.setItem("key", "value");
读取数据语法:
var lastname = localStorage.getItem("key");
删除数据语法:
localStorage.removeItem("key");
欢迎来访我的博客,一起学习:PlumLI
本地数据local storage和session storage的更多相关文章
- 关于local storage 和 session storage以及cookie 区别简析
session storage 和local storage 都是存储在客户端的浏览器内: 一:关于COOKIE 的缺陷 * Cookie的问题 * 数据存储都是以明文(未加密)方式进行存储 * 安全 ...
- Python-获取Local Storage和Session Storage
一.简介 LocalStorage 是只读的.数据存储也是跨浏览器会话.LocalStorage 类似于SessionStorage. 区别在于,数据存储在 LocalStorage 是无期限的,而当 ...
- 关于local storage及session storage 应用问题
H5- storage 可以在不同页面内进行数据传递数据信息,保证了数据传输不许后台交互即可在前端部分自我实现,以下为local storage 应用个人简析: * localStorage * se ...
- cookie ,session Storage, local storage
先来定义: cookie:是网站为了标识用户身份存储在本地终端的数据,其数据始终在APP请求中存在,会在服务器和浏览器中来回传递 数据大小不超过4k, 可以设置有效期,过了有效期自动删除 sessio ...
- HTML5本地存储(Local Storage) 的前世今生
长久以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势.对于桌面应用(或者原生应用),操作系统一般都提供了一个抽象层用来帮助应用程序保存其本地数据 例如(用户配置信息或者运行时状态等). 常 ...
- (vue操作storage)Vue plugin for work with local storage,session storage and memo
vue-ls https://www.npmjs.com/package/vue-ls NPM npm install vue-ls --save Yarn yarn add vue-ls Usage ...
- Session Storage、Cache Storage
Session Storage sessionStorage用于本地存储一个会话(session)的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁(浏览器关闭).因此se ...
- 《前端之路》之 Cookie && localStorage && Session Storage 缓存相关
08: Cookie && localStorage && Session Storage 缓存相关 客户端.前端 存储 一. 起 因 首先解释下为什么想来写这个关于前 ...
- 客户端本地存储(cookie、web Storage、vuex)选择
一.cookie .localStorage .sessionStorage .vuex 比较 cookie 4K 有时效性 可服务器传递 cookie是由服务器产生,存储在客户端的一 ...
- html5本地存储(一)------ web Storage
在html5中与本地存储相关的两个相关内容:Web Storage 与本地数据库 web Storage存储机制是对html4中的cookie存储机制的一个改善.web Storage就是在web上 ...
随机推荐
- vue事件监听
v-on <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- msp430点灯实验
title: msp430点灯实验 date: 2023-04-15 15:31:25 description: 基于msp430f5529点灯实验 一.实验内容 使用开发板:msp430f5529 ...
- 大规模 Transformer 模型 8 比特矩阵乘简介 - 基于 Hugging Face Transformers、Accelerate 以及 bitsandbytes
引言 语言模型一直在变大.截至撰写本文时,PaLM 有 5400 亿参数,OPT.GPT-3 和 BLOOM 有大约 1760 亿参数,而且我们仍在继续朝着更大的模型发展.下图总结了最近的一些语言模型 ...
- element-ui Table 表格行间隔及行边框效果
<el-table :data="tableData" style="width: 100%" :cell-class-name="tableC ...
- Reshaper 代码清理工具
reshaper是个好工具,能帮助我们提升开发效率,比如本文要介绍的全局代码清理功能. 如果你的VS安装了reshaper,可以通过Ctrl+E+C快捷键打开代码清理窗口. 代码清理,可以格式化多种文 ...
- LeetCode 周赛 344(2023/05/07)手写递归函数的固定套路
本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 大家好,我是小彭. 今天下午有力扣杯战队赛,不知道官方是不是故意调低早上周赛难度给选手们练练手. 往期周赛回 ...
- 2022-06-30:以下golang代码输出什么?A:0;B:2;C:运行错误。 package main import “fmt“ func main() { ints := make
2022-06-30:以下golang代码输出什么?A:0:B:2:C:运行错误. package main import "fmt" func main() { ints := ...
- pycharm报错提示:无法加载文件\venv\Scripts\activate.ps1,因为在此系统上禁止运行脚本。
pycharm报错提示:无法加载文件\venv\Scripts\activate.ps1,因为在此系统上禁止运行脚本. 解决办法 1.终端输入get-executionpolicy,回车返回Restr ...
- 使用vite的创建vue项目
首先也是打开项目文件目录 在标签处快速打上cmd即可打开cmd窗口 然后按照顶部图进行操作即可完成 安装完成的样子如下图 紧接着输入 npm run dev 将Local 的IP复制到浏览器打开,出现 ...
- asp.net WebApi JWT
文章转自 https://blog.csdn.net/liwan09/article/details/83820651 参考资料: https://docs.microsoft.com/en-us/a ...