文档章节

HTML5 本地存储Web Storage

nao
 nao
发布于 2015/12/11 16:47
字数 668
阅读 97
收藏 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

粉丝 28
博文 155
码字总数 108102
作品 0
成都
后端工程师
私信 提问
HTMl5的sessionStorage和localStorage

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结...

lg2045
2014/10/09
0
0
HTML 5 Web 存储-sessionStorage和localStorage

HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 sessionStorage用于本地存储一个会话(session)中的数...

两毛五哥哥
2017/11/02
0
0
HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN
05/11
0
0
HTML5-localStorage、sessionStorage用法总结

localStorage和sessionStorage功能 localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只...

iNiL0119
2015/03/21
0
0
localstorage、sessionstorage的用法

html5 中的 web Storage 包括了两种存储方式:sessionStorage 和 localStorage。 sessionStorage 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问,会话...

韦姣敏
2017/11/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

20181213 上课截图

小丑鱼00
12分钟前
0
0
nginx+php-fpm配置后页面显示空白的解决方法以及用nginx和php-fpm解决“502 Bad Gateway”问题

https://stackoverflow.com/questions/15423500/nginx-showing-blank-php-pages For reference, I am attaching my location block for catching files with the .php extension: location ~......

Yao--靠自己
19分钟前
1
0
mac 没声音

somehow不时就会出现这种情况。之前都得重启。 其实可以直接在terminal里打以下命令: sudo kextunload /System/Library/Extensions/AppleHDA.kext sudo kextload /System/Library/Extension...

dubox
35分钟前
1
0
看完让你彻底搞懂Websocket原理

作者:Ovear 链接:https://www.zhihu.com/question/20215561/answer/40316953 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 额。。最高票答案没答到点...

时刻在奔跑
49分钟前
2
0
Spring Cloud Stream消费失败后的处理策略(一):自动重试

之前写了几篇关于Spring Cloud Stream使用中的常见问题,比如: 如何处理消息重复消费 如何消费自己生产的消息 下面几天就集中来详细聊聊,当消息消费失败之后该如何处理的几种方式。不过不论...

程序猿DD
51分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部