在html中,可以使用 Web Storage API 来保存数据在浏览器客户端,这样可以避免重复从服务器加载数据。
有两种API, sessionStorage 和 localStorage ,它们都是window的对象。
这两个对象的使用方式完全一样,只是作用范围和保存的数据的生命周期有区别。下面我们来具体介绍:
一、使用方式
因为localStorage和sessionStorage的使用方式完全一样,所以下面的使用举例我们都是以sessionStorage来举例。
sessionStorage中的数据存储方式是 key -value的方式,要求key和value都是字符串类型,虽然有些浏览器对于value支持别的数据类型,但目前的大部分浏览器还只支持字符串类型。 可以把它们想象中一个map对象。
1、保存和获取数据
sessionStorage["key1"] = value1;
通过这种下标的方式可以添加一对key-value值(如果key已经存在,则是修改);
var data = sessionStorage["key1"];
通过这种方式是获取key对应的value值。
除了用下标方式,还可以用对象的方法 setItem(key,value) 和 getItem(key) 来设置和获取值。
2、清除值
清除单个key-value对,可以用对象的方法 removeItem(key)
清除对象中的所有数据可以用对象的方法 clear()
注意: 不能用 sessionStorage["key1"] = "" 或 sessionStorage["key1"]=undefined;
这种方式sessionStorage对象会把双引号或undefined 当作字符串来处理,不仅达不到预期的结果,还会造成问题。
二、如何处理json对象
在js中, 最常用的就是json对象,可sessionStorage中只能保存字符串,操作起来比较麻烦。我们可以转换下思路。
存储时,利用JSON.stringify(json对象) 这个内置的api将一个要保存的json对象转换为字符串存到sessionStorage中。
需要使用时,用 JSON.parse(字符窜) 这个Api将从sessionStorage取到的字符串值转换成json对象进行处理,处理后再转为字符串进行保存。
三、sessionStorage 和 localStorage的区别
1、两者的作用范围不同
1)sessionStorage 保存的数据只能被浏览器的同一个浏览器窗口(或同一个浏览器tab页)访问。
比如某个页面往sessionStorage存储了数据,该窗口加载了另一个页面(必须是和前面页面同源的),则另一个页面也能访问到该数据。
但如果打开一个新的浏览器窗口(或新的浏览器tab页),在其中加载的页面无法访问其它窗口通过sessionStorage存储的数据。
2)而localStorage中存储的数据可以被不同的浏览器窗口(或tab页)中的页面中的js访问,当然前提这些页面必须是同源的。
2、两者的声明周期不同
1)sessionStorage 只对当前窗口有效,一旦当前窗口关闭,则数据会消失。
但时需要注意的是,如果浏览器窗口不是正常关闭的,而是异常关闭的,当浏览器自动恢复窗口时,也许数据还在。
2)localStorage的数据可以在浏览器本地长期存在,即使浏览器关闭了,以后打开浏览器,加载相应的页面后依然能访问到数据。
HTML 5 Web Storage 使用的更多相关文章
-
HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)
1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是c ...
-
Html 5 Web Storage
HTML5 中使用Web Storage 技术进行本地存储,能够在Web 客户端进行数据存储.WebStorage 曾今属于HTML5的规范,目前已经被独立出来形成单独的规范体系.简单来说使用Web本 ...
-
web storage和cookie的区别
Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的.Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外co ...
-
数据存储之Cookie和Web Storage。
Cookie Cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).接下来就谈谈cookie的一些利弊,coo ...
-
HTML5本地存储 Web Storage
Web Storage基本介绍 HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API sessionStorage 和 localStorage,二者的差异主要是数 ...
-
HTML5 Web Storage
Web Storage是HTML5 API提供一个新的重要的特性: 最新的Web Storage草案中提到,在web客户端可用html5 API,以Key-Value形式来进行数据持久存储: 目前主要 ...
-
html5 Web Storage(localStorage(),sessionStorage())
Web Storage包括了两种存储方式:sessionStorage和localStorage sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束 ...
-
Web存储(Web Storage)的浏览器支持情况
所有很酷的功能特征的出现最关键的就是浏览器的支持情况,幸运的是,所有的现代浏览器都支持HTML5 Web存储(Web Storage),从IE8开始也支持它.HTML5 Web存储(Web Stora ...
-
web storage的用法
Web Storage分为两种: sessionStorage localStorage 从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了: ...
-
Web Storage API : LocalStroage
这是一篇详细介绍详细介绍详细介绍_(:з」∠)_ 背景: 当你访问一个页面,并不是丢到服务器,等待用户访问就可以了的.从输入网址到显示网页的全过程,可以参考这里 简单来说,在输入url按下回车键后,首 ...
随机推荐
-
NOIP模拟赛 夕阳
题目描述 “我有个愿望,我希望在灿烂千阳时遇见你.” 这是个有n个点的世界,有m条无向边连接着这n个点,但是不保证点之间能够互相到达. “这个世界的夕阳,只在奇数长的简单路径的尽头.”一个神如是说. ...
-
[转] Sublime Text 3支持GB2312和GBK编码
Sublime Text 3与Sublime Text 2的不同 其实有不少人写过如何让Sublime Text 2支持GB2312和GBK编码,例如这篇.基本原理就是先装好Package Contr ...
-
ajax 乱码
1. 在页面的中文变量前添加encodeURIComponent() $.ajax({ type: "POST", url: "", data:{ id:e ...
-
SiteView
http://www.siteview.com/cms/sites/public/home.html
-
【POJ2887】【块状链表】Big String
Description You are given a string and supposed to do some string manipulations. Input The first lin ...
-
WeQuant交易策略—KDJ
KDJ随机指标策略策略介绍KDJ指标又叫随机指标,是一种相当新颖.实用的技术分析指标,它起先用于期货市场的分析,后被广泛用于股市的中短期趋势分析,是期货和股票市场上最常用的技术分析工具.随机指标KDJ ...
-
Android中碎片的添加问题
碎片在Android中的应用是十分广泛的,它就像是嵌在活动中的另一个活动就像是一个容器包含了另一个容器,那么到底该怎么添加碎片呢?主要有两种方法,一种是在该碎片所在的xml文档中使用Android:n ...
-
CentOS7下HTTP并发测试工具Apache Benchmark(AB)安装和使用
安装: yum -y install httpd-tools 使用: ab -c -n http://10.255.67.60:1111/info -c 并发数,concurrency -n 发送多少 ...
-
Charles使用笔记
Charles本身其实是一款十分强大且易用的代理软件,最近用的比较多,大致整理了一下自己用到的一些东西. Charles的主要作用 1.查看网络请求,手动分析数据 2.代理接口,模拟数据 ...
-
很好的开源UI框架Chico UI
介绍一个很好的开源的UI框架,依赖于jquery 官网:http://www.chico-ui.com.ar/ 以下是相关截图: 消息提示 自动完成 分页,列表 Chico UI是什么? Chico ...