文档章节

HTML5 本地存储Web Storage

nao
 nao
发布于 2015/12/11 16:47
字数 668
阅读 122
收藏 12

行业解决方案、产品招募中!想赚钱就来传!>>>

Web Storage 功能,顾名思义,就是在web上针对客户端本地存储数据的功能,具体来说Web Storage 分为两种:

sessionStorage:

    将数据保存在session对象中,所谓session是指用户在浏览某个网站中,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

localStorage:

    将数据保存在客户端本地的硬件设备(通常指硬盘,当然可以是其他的硬盘设备)中,即是浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时,仍然可以继续使用。

sessionStorage与localStorage区别:

    这两者的区别在于sessionStorage为临时保存,而localStorage为永久保存。

对比session和cookie的区别主要体现在一下三点:

    1.容量大,IE8里面是10M, 不同的浏览器支持的大小不一致。

    2. 不会随着会话来传输。

    3. 读取和写入方便,有现成的api


    不管是sessionStorage, 还是localStorage, 可使用的API都相同,常用的有如下几个方法:

    1.保存数据: localStorage.setIterm(key,value);     sessionStorage.setItem(key, value);

    2.读取数据: localStorage.getIterm(key);              sessionStorage.getItem(key);

    3.删除单个数据: localStorage.removeItem(key)   sessionStorage.removeItem(key);

    4.删除所有数据: localStorage.clear();                    sessionStorage.clear();

两个都有属性length 表示Key的个数,也即key长度:

    var keylength1 = localStorage.length; var keyLength2 = sessionStorage.length;

如上,key和value都必须为字符串,换言之,Web Storage的API只能操作字符串


Web storage 的浏览器支持情况的判断

    在使用web storage时,首先判断是否支持该功能,有些浏览器不支持(IE),只有支持才可以使用,判断方法如下:

if(window.localStorage){  //或者 window.sessionStorage     
    alert("浏览支持localStorage")   
}else{      
    alert("浏览暂不支持localStorage")   
}   
  
//或者   
if(typeof window.localStorage == 'undefined') {  //或者 window.sessionStorage   
    alert("浏览暂不支持localStorage")   
}

Web Storage使用实例代码:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Web Storage Demo</title>
<script type="text/javascript">
function $(id){ return document.getElementById(id);}
function savesessionStorage(id){sessionStorage.setItem('message',$(id).value);}
function loadsessionStorage(id){$(id).innerHTML=sessionStorage.getItem("message");}
function savelocalStorage(id){localStorage.setItem("message",$(id).value);}
function loadlocalStorage(id){$(id).innerHTML=localStorage.getItem("message");}
</script>
</head>
<body>
<div>
<h2>sessionStorage Demo</h2>
<p id="sessionMsg"></p>
<input type="text" id="sessionInput" />
<input type="button" value="保存数据" onclick="savesessionStorage('sessionInput');" />
<input type="button" value="读取数据" onclick="loadsessionStorage('sessionMsg');" />
<br />
<h2>localStorage Demo</h2>
<p id="localMsg"></p>
<input type="text" id="localInput" />
<input type="button" value="保存数据" onclick="savelocalStorage('localInput');" />
<input type="button" value="读取数据" onclick="loadlocalStorage('localMsg');" />
</div>
</body>
</html>



参考文章:

http://www.sitepoint.com/html5-web-storage/

http://www.cnblogs.com/asqq/archive/2012/06/20/2556957.html

http://blog.csdn.net/shenzhennba/article/details/8480756

http://www.cnblogs.com/erdeni/p/WebStorage.html

http://www.w3school.com.cn/html5/html_5_webstorage.asp

nao

nao

粉丝 27
博文 155
码字总数 108154
作品 0
成都
后端工程师
私信 提问
加载中
请先登录后再评论。
树莓派(Raspberry Pi):完美的家用服务器

自从树莓派发布后,所有在互联网上的网站为此激动人心的设备提供了很多有趣和具有挑战性的使用方法。虽然这些想法都很棒,但树莓派( RPi )最明显却又是最不吸引人的用处是:创建你的完美家用...

异次元
2013/11/09
6.2K
8
Web开发组件管理器--Bower

Bower 是一个针对Web开发的包管理器。该工具主要用来帮助用户轻松安装CSS、JavaScript、图像等相关包,并管理这些包之间的依赖。 功能有些类似于Component。不同之处是,Component是围绕Git...

匿名
2013/02/01
1.2W
2
集群存储系统--YFS

YFS集群存储系统由多个元数据服务器(MDS)、多个块数据服务器(CDS)和多个客户端(client)互联组成集群; 数据被分成64M固定大小的数据块(Chunk),每个数据块在CDS本地以常规文件的形式...

匿名
2013/02/19
1.8K
0
Web 的 SSH 控制台--KeyBox

KeyBox 是一个基于 Web 的 SSH 控制台,用于同步管理多个系统并且可执行远程命令。允许你共享终端命令并上传文件到所有系统。但连接会话打开时你可选择在其中一个终端或者多个终端上执行命令...

匿名
2013/02/28
8.3K
0
WSGI Web服务器--UV-Web

uv-web是一个轻量级的支持高并发的WSGI Web服务器,基于libuv构建,部分代码源于开源项目bjoern,本质是python的C扩展,所以适用于部署绝大部分 python web应用(如 Django) 特性 兼容 HTTP 1...

Jone.x
2013/03/04
1.7K
0

没有更多内容

加载失败,请刷新页面

加载更多

数据库高频面试点,事务/乐观锁/悲观锁/CAS/MySQL存储引擎

事务的ACID特性是什么? 原子性: 事务是最小的执行单位,不允许分割。事务的原子性确保动作要么全部完成,要么完全不起作用; 一致性: 执行事务前后,数据保持一致,多个事务对同一个数据读...

osc_45536bvu
26分钟前
16
0
大数据BI软件助力企业数字化转型

当下,「新基建」势头正盛,随着“新基建”成为热议话题,数字化也随之成为企业面临的新机遇和新挑战。新基建的核心就是数据,数据是数字经济和企业数字化转型的生产要素和发展动力。 再看看...

osc_0boqdoe2
28分钟前
0
0
凯旋创投来志刚:基因治疗新时代,大戏刚刚开始

  2017 年,全球第一个基因治疗方法 CAR-T 细胞药物 Kymriah 获得 FDA 上市批准,从此掀起了基因治疗的热潮。随着相关技术和政策的不断成熟,基因治疗市场也随之扩大。根据德勤发布的《引领...

osc_k3vwonkw
29分钟前
10
0
LightningChart.NET使用两个BarSeries创建简单的2D图表

本教程介绍了如何使用两个BarSeries创建简单的2D图表。 BarSeries将数据值表示为矩形条,并且可以用于以非常清晰的方式可视化数据之间的差异和方差。 在本教程中,BarSeries用于表示两年期间...

roffey
29分钟前
0
0
Mybatis trim 标签的 2 个妙用!

云栖号资讯:【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来! mybatis的trim标签一般用于去除sql语句中多余的and关键字,逗号,或者给sql语句前拼...

osc_x03qsedc
30分钟前
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部