随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据, 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的更多相关文章

  1. 关于local storage 和 session storage以及cookie 区别简析

    session storage 和local storage 都是存储在客户端的浏览器内: 一:关于COOKIE 的缺陷 * Cookie的问题 * 数据存储都是以明文(未加密)方式进行存储 * 安全 ...

  2. Python-获取Local Storage和Session Storage

    一.简介 LocalStorage 是只读的.数据存储也是跨浏览器会话.LocalStorage 类似于SessionStorage. 区别在于,数据存储在 LocalStorage 是无期限的,而当 ...

  3. 关于local storage及session storage 应用问题

    H5- storage 可以在不同页面内进行数据传递数据信息,保证了数据传输不许后台交互即可在前端部分自我实现,以下为local storage 应用个人简析: * localStorage * se ...

  4. cookie ,session Storage, local storage

    先来定义: cookie:是网站为了标识用户身份存储在本地终端的数据,其数据始终在APP请求中存在,会在服务器和浏览器中来回传递 数据大小不超过4k, 可以设置有效期,过了有效期自动删除 sessio ...

  5. HTML5本地存储(Local Storage) 的前世今生

    长久以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势.对于桌面应用(或者原生应用),操作系统一般都提供了一个抽象层用来帮助应用程序保存其本地数据 例如(用户配置信息或者运行时状态等). 常 ...

  6. (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 ...

  7. Session Storage、Cache Storage

    Session Storage sessionStorage用于本地存储一个会话(session)的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁(浏览器关闭).因此se ...

  8. 《前端之路》之 Cookie && localStorage && Session Storage 缓存相关

    08: Cookie && localStorage && Session Storage 缓存相关 客户端.前端 存储 一. 起 因 首先解释下为什么想来写这个关于前 ...

  9. 客户端本地存储(cookie、web Storage、vuex)选择

    一.cookie .localStorage .sessionStorage .vuex 比较 cookie   4K    有时效性    可服务器传递 cookie是由服务器产生,存储在客户端的一 ...

  10. html5本地存储(一)------ web Storage

    在html5中与本地存储相关的两个相关内容:Web Storage  与本地数据库 web Storage存储机制是对html4中的cookie存储机制的一个改善.web Storage就是在web上 ...

随机推荐

  1. MySQL(四)用户与权限管理

    用户与权限管理 用户管理 MySQL用户分为普通用户和root用户,提供了许多语句来管理包括登录.退出MySQL服务器.创建用户.删除用户.密码管理和权限管理等内容. 登录MySQL服务器 mysql ...

  2. 【Git GitHub Idea集成】

    1 Git介绍 分布式版本控制工具 VS 集中式版本控制工具 git是一个免费开源的分布式版本控制系统,可以快速高效地处理从小型到中型的各种项目. 1.1 Git进行版本控制 集中式版本控制工具:如C ...

  3. ditto 添加统计粘贴次数功能

    通过观察ditto的表发现, 可以添加触发器进行统计粘贴次数的功能,不需要用源码 Ditto 是一款强大的 Windows 剪贴板增强工具,它支持64位操作系统,而且完全免费,绿色开源,支持中文,而且 ...

  4. Java中的同步

    Java中的同步   线程间的通讯首要的方式就是对字段及其字段所引用的对象的共享访问.这种通信方式是及其高效的,但是也是导致了可能的错误:线程间相互干涉和内存一致性的问题.避免出现这两种错误的方法就是 ...

  5. RTSP Server(LIVE555)源码分析(三)-DESCRIBE信令

    主要分析RTSPServer::RTSPClientSession针对客户端DECCRIBE信令处理. 一.回调函数incomingRequestHandler分析 回顾一下rtsp客户端sessio ...

  6. [C++基础入门] 8、结构体

    文章目录 8 结构体 8.1 结构体基本概念 8.2 结构体定义和使用 8.3 结构体数组 8.4 结构体指针 8.5 结构体嵌套结构体 8.6 结构体做函数参数 8.7 结构体中 const使用场景 ...

  7. 武装你的WEBAPI-OData与DTO

    前面写了很多有关OData使用的文章,很多读者会有疑问,直接将实体对象暴露给最终用户会不会有风险?$expand在默认配置的情况下,数据会不会有泄露风险? 答案是肯定的,由于OData的特性,提供给我 ...

  8. 2021-02-01:Redis 集群会有写操作丢失吗?

    福哥答案2021-02-01: 以下情况可能导致写操作丢失:1.过期 key 被清理.2.最大内存不足,导致 Redis 自动清理部分 key 以节省空间.3.主库故障后自动重启,从库自动同步.4.单 ...

  9. 2021-11-06:3的幂。给定一个整数,写一个函数来判断它是否是 3 的幂次方。如果是,返回 true ;否则,返回 false 。整数 n 是 3 的幂次方需满足:存在整数 x 使得 n ==

    2021-11-06:3的幂.给定一个整数,写一个函数来判断它是否是 3 的幂次方.如果是,返回 true :否则,返回 false .整数 n 是 3 的幂次方需满足:存在整数 x 使得 n == ...

  10. 使用4G通信模块和MQTT协议,完成物联网设备开发。

    使用4G通信模块和MQTT协议,完成物联网设备开发. (1)安装并使用4G模块通信模块,建立microPython开发环境: (2)使用提供的Demo开发例程,使用MQTT传输协议连接阿里或腾讯网站, ...