localStorage 和 sessionStorage
1.概述
以前本地存储使用 cookie。但是 Web 存储需要更加安全和快速。所以就出现了localStorage 和 sessionStorage。
2.sessionStorage,localStorage,cookie区别
1)传输数据:cookie数据作为会话标识,在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发送给服务器,仅在本地保存。
2)存储大小限制:cookie数据不能超过4K,同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大
3)数据有效期:sessionStorage:仅在当前浏览器窗口关闭之前有效;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie:只在设置的cookie过期时间之前有效,即使窗口关闭或浏览器关闭 。
4)作用域:sessionStorage 即使是同一个页面,不在不同的浏览器窗口中共享;localstorage,cookie是在所有同源窗口中都是共享的
3.存值
1)以key/value的形式存
2)通常将要保存的数据先保存到一个对象上,然后将该对象作为value和key一起保存起来,我们将使用 [JSON.stringify](http://www.runoob.com/js/javascript-json-stringify.html) 来存储对象数据,[JSON.stringify](http://www.runoob.com/js/javascript-json-stringify.html) 可以将对象转换为字符串。
4.方法
不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):
保存数据:localStorage.setItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除所有数据:localStorage.clear();
得到某个索引的key:localStorage.key(index);
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保存的数据用于浏览器的一次会话,当会话结束 ...
随机推荐
- 润乾报表与DERBY数据库的创建连接详解
1. 问题概述 1.Derby数据库的创建过程 2.润乾报表连接Derby数据库展现数据 概述: Derby是Apache Software Foundation (ASF)的一个的孵化器项目. ...
- 网络 OSI参考模型与TCP/IP模型
ISO是国际标准化组织.OSI,开放互联系统.IOS,思科交换机和路由器的操作系统. TCP/IP模型是OSI模型的简化.所有的互联网协议都是基于OSI模型开发的. 分层:便于管理,每层只管理下层,总 ...
- maven 超级pom位置、maven命令、构件、下载位置、手动打包位置、中央仓库ip
1.超级pom位置 ----> 解压M2_HOME/lib/maven-model-builder-3.5.4.jar 2.运行maven 命令实际上是运行了 java 命令,因为maven插件 ...
- iptable防火墙案例
[root@WX020 firewall]# cat /etc/sysconfig/iptables# Firewall configuration written by system-config- ...
- scrapy实战--爬取报刊名称及地址
目标:爬取全国报刊名称及地址 链接:http://news.xinhuanet.com/zgjx/2007-09/13/content_6714741.htm 目的:练习scrapy爬取数据 学习过s ...
- Mysql使用binlog恢复数据解决误操作问题的两种方法
为保证没有其他参数配置影响,重新安装配置了一台最小化安装的CentOS7虚拟机 1. 基础知识 安装mysql5.6数据库Mysql binlog初步理解 2. 配置mysql 开启binlog.修 ...
- Flask 参数简介
我们都知道学习了Flask的时候它里面的参数是有很多种的参数 都是需要相互进行调用传递的 今天就简要分析一些常见的参数 首先导入Flask之后看 源码 from flask import Flas ...
- orcl数据库查询重复数据及删除重复数据方法
工作中,发现数据库表中有许多重复的数据,而这个时候老板需要统计表中有多少条数据时(不包含重复数据),只想说一句MMP,库中好几十万数据,肿么办,无奈只能自己在网上找语句,最终成功解救,下面是我一个实验 ...
- Mitigate XSS attacks
JavaScriptEncode //使用“\”对特殊字符进行转义,除数字字母之外,小于127使用16进制“\xHH”的方式进行编码,大于用unicode(非常严格模式). var JavaScrip ...
- Linux /dev/null详解
常用的命令展示 /dev/null 和 /dev/zero的区别 1./dev/null:表示 的是一个黑洞,通常用于丢弃不需要的数据输出, 或者用于输入流的空文件 ...