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的更多相关文章

  1. 似懂非懂的localStorage和sessionStorage

    一.区别 相信很多人都见过这两个关于HTML5的新名词!HTML5种的web storage包含两种存储方式:localStorage和sessionStorage,这两种方式存储的数据不会自动发给服 ...

  2. html5存储方式localstorage和sessionStorage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. 区别:localStorage无时间限制,除非主动删除数据,否则永不过期:sessio ...

  3. localstorage 和 sessionstorage 本地存储

    在我们日常的工作和实际项目中,做好数据数据缓存可以是我们的程序执行效率更高,可以使我们避免重复请求 服务器,减轻服务器的压力,可以提高使用户的体验度. 那么 HTML5 存储的目标是什么? 1.解决存 ...

  4. Cookie, LocalStorage 与 SessionStorage

    Cookie, LocalStorage 与 SessionStorage相同点 都是储存在用户本地的数据. 意义在于避免数据在浏览器和服务器间不必要地来回传递. 三者的特点     同属于html5 ...

  5. localStorage与sessionStorage 的区别

    通过一枚页面计数器来区别localStorage与sessionStorage. 通过一个计数变量pageconut,每刷新页面,增加的是localStorage的数量,而sessionStorage ...

  6. HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  7. localStorage和sessionStorage

    首先自然是检测浏览器是否支持本地存储. 在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存 ...

  8. HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...

  9. html5 Web Storage(localStorage(),sessionStorage())

    Web Storage包括了两种存储方式:sessionStorage和localStorage sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束 ...

  10. HTML5本地存储之localStorage、sessionStorage

    1.概述 localStorage和sessionStorage统称为Web Storage,它使得网页可以在浏览器端储存数据. sessionStorage保存的数据用于浏览器的一次会话,当会话结束 ...

随机推荐

  1. 润乾报表与DERBY数据库的创建连接详解

     1. 问题概述 1.Derby数据库的创建过程 2.润乾报表连接Derby数据库展现数据 概述: Derby是Apache Software Foundation (ASF)的一个的孵化器项目. ...

  2. 网络 OSI参考模型与TCP/IP模型

    ISO是国际标准化组织.OSI,开放互联系统.IOS,思科交换机和路由器的操作系统. TCP/IP模型是OSI模型的简化.所有的互联网协议都是基于OSI模型开发的. 分层:便于管理,每层只管理下层,总 ...

  3. maven 超级pom位置、maven命令、构件、下载位置、手动打包位置、中央仓库ip

    1.超级pom位置 ----> 解压M2_HOME/lib/maven-model-builder-3.5.4.jar 2.运行maven 命令实际上是运行了 java 命令,因为maven插件 ...

  4. iptable防火墙案例

    [root@WX020 firewall]# cat /etc/sysconfig/iptables# Firewall configuration written by system-config- ...

  5. scrapy实战--爬取报刊名称及地址

    目标:爬取全国报刊名称及地址 链接:http://news.xinhuanet.com/zgjx/2007-09/13/content_6714741.htm 目的:练习scrapy爬取数据 学习过s ...

  6. Mysql使用binlog恢复数据解决误操作问题的两种方法

    为保证没有其他参数配置影响,重新安装配置了一台最小化安装的CentOS7虚拟机 1. 基础知识
 安装mysql5.6数据库Mysql binlog初步理解 2. 配置mysql 开启binlog.修 ...

  7. Flask 参数简介

    我们都知道学习了Flask的时候它里面的参数是有很多种的参数  都是需要相互进行调用传递的  今天就简要分析一些常见的参数 首先导入Flask之后看 源码 from flask import Flas ...

  8. orcl数据库查询重复数据及删除重复数据方法

    工作中,发现数据库表中有许多重复的数据,而这个时候老板需要统计表中有多少条数据时(不包含重复数据),只想说一句MMP,库中好几十万数据,肿么办,无奈只能自己在网上找语句,最终成功解救,下面是我一个实验 ...

  9. Mitigate XSS attacks

    JavaScriptEncode //使用“\”对特殊字符进行转义,除数字字母之外,小于127使用16进制“\xHH”的方式进行编码,大于用unicode(非常严格模式). var JavaScrip ...

  10. Linux /dev/null详解

    常用的命令展示 /dev/null 和 /dev/zero的区别        1./dev/null:表示 的是一个黑洞,通常用于丢弃不需要的数据输出, 或者用于输入流的空文件            ...