LocalStorage与SessionStorage
localStorage与sessionStorage
localStorage和sessionStorage是HTML5提供的对于Web存储的解决方案。
相同点
- 都与
HTTP无关,是HTML5提供的标准,当发起HTTP请求时不会与Cookie一样自动携带。 - 都是以键值对的形式存在,即
Key-Value形式,常用的Api也相同。 - 存储类型都是
String类型,当进行存储时,会调用toString()方法转为String类型。 - 对于每个域容量是有限的,不同浏览器不一样,大部分存储为
5M左右。
不同点
localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。SessionStorage会在用户关闭浏览器后,即会话结束后,数据失效;SessionStorage与服务端Session无关。
常用操作
- 储存数据
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');
/**
* 由于存储数据会调用 toString() 方法
* Object 类型会存储为 [object Object] 字符串
* 所以进行存储时需调用 JSON.stringify() 转化为字符串
* 取出时调用 JSON.parse() 将字符串转回对象
*/
- 读取数据
localStorage.getItem('key');
sessionStorage.getItem('key');
- 删除数据
localStorage.removeItem('key');
sessionStorage.removeItem('key');
- 清空数据
localStorage.clear();
sessionStorage.clear();
每日一题
https://github.com/WindrunnerMax/EveryDay
LocalStorage与SessionStorage的更多相关文章
- 似懂非懂的localStorage和sessionStorage
一.区别 相信很多人都见过这两个关于HTML5的新名词!HTML5种的web storage包含两种存储方式:localStorage和sessionStorage,这两种方式存储的数据不会自动发给服 ...
- html5存储方式localstorage和sessionStorage
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. 区别:localStorage无时间限制,除非主动删除数据,否则永不过期:sessio ...
- localstorage 和 sessionstorage 本地存储
在我们日常的工作和实际项目中,做好数据数据缓存可以是我们的程序执行效率更高,可以使我们避免重复请求 服务器,减轻服务器的压力,可以提高使用户的体验度. 那么 HTML5 存储的目标是什么? 1.解决存 ...
- Cookie, LocalStorage 与 SessionStorage
Cookie, LocalStorage 与 SessionStorage相同点 都是储存在用户本地的数据. 意义在于避免数据在浏览器和服务器间不必要地来回传递. 三者的特点 同属于html5 ...
- localStorage与sessionStorage 的区别
通过一枚页面计数器来区别localStorage与sessionStorage. 通过一个计数变量pageconut,每刷新页面,增加的是localStorage的数量,而sessionStorage ...
- HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- localStorage和sessionStorage
首先自然是检测浏览器是否支持本地存储. 在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存 ...
- HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...
- html5 Web Storage(localStorage(),sessionStorage())
Web Storage包括了两种存储方式:sessionStorage和localStorage sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束 ...
- HTML5本地存储之localStorage、sessionStorage
1.概述 localStorage和sessionStorage统称为Web Storage,它使得网页可以在浏览器端储存数据. sessionStorage保存的数据用于浏览器的一次会话,当会话结束 ...
随机推荐
- win10 安装VMware Workstation Pro提示无法在windows上运行
win10 安装vm无法在windows上运行 之前还可以用 网上搜了一下 要安装最新15.5.0就不会报错了 没毛病!! 不想注册下载 百度网盘(2019年9月19日版本) https://pan ...
- 中国的规模优势,有望帮助AI芯片后来者居上?
芯片一直是个神奇的东西,表面上看是电脑.笔记本.智能手机改变了世界,其实,真正改变世界的硬件内核是芯片,芯片相关的技术才是科技界最实用.最浪漫的基础技术,也正因如此,谁掌握了芯片基础技术,谁就能立于 ...
- css 控制li点与文字的距离
ul>li 默认的样式如下 前面的点与文字是有间距的 可见,通过设置 text-indent 属性可以调整li点与文字的距离
- 递归、尾递归和使用Stream延迟计算优化尾递归
我们在学数据结构的时候必然会接触栈(Stack),而栈有一个重要的应用是在程序设计语言中实现递归.递归用途十分广泛,比如我们常见的阶乘,如下代码: 1234 public static int (in ...
- 5G将会是量变到质变的新科技时代
马斯洛需求分为5层,最底层的需求是温饱,过去几十年都无人反驳,但随着科技的发展,人类最基本最底层的需求已经不再是温饱,而是手机和WIFI,当然,这只是网友的调侃罢了,但也从侧面反映出了手机和WFI网 ...
- How to Write a README on GitHub
最近在寫 GitHub 上的 README,發現這個東西好像每個人的寫法都不太一樣,於是稍微整理了一下自己覺得大概要包含哪些內容. Motivation 顧名思義就是簡介一下為什麼會有這個專案,以及這 ...
- SpringCloud - 全家桶
先导篇:SpringCloud介绍篇 第一篇:注册中心Eureka 第二篇:服务提供与Rest+Ribbon调用 第三篇:服务提供与Feign调用 第四篇:熔断器Hystrix(断路器) 第五篇:熔断 ...
- YAML语法使用,JSR303数据校验
YAML YAML是 "YAML Ain't a Markup Language" (YAML不是一种置标语言)的递归缩写 # yaml配置 server: prot: YAML语 ...
- ThreadLocal源码探究 (JDK 1.8)
ThreadLocal类之前有了解过,看过一些文章,自以为对其理解得比较清楚了.偶然刷到了一道关于ThreadLocal内存泄漏的面试题,居然完全不知道是怎么回事,痛定思痛,发现了解问题的本质还是需要 ...
- 它的JS与HTML标签是分离的吗
一个单的利用JS切换图片的功能写法1: <section> <h2>JS切换图片</h2> <ul class="pictable"> ...