文档章节

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
HTML5-localStorage、sessionStorage用法总结

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

iNiL0119
2015/03/21
0
0
HTML5学习之Web Storage基础知识

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

CHIEMINCHAN
05/11
0
0
localstorage、sessionstorage的用法

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

韦姣敏
2017/11/04
0
0
html5 sessionStorage 与 localStorage使用详解

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

Adam-Lee
2012/08/22
0
1

没有更多内容

加载失败,请刷新页面

加载更多

SAP不同的产品是如何支持用户创建自定义字段的

我们从SAP CRM,Cloud for Customer(简称C4C)和S/4HANA这三个产品分别来看看。 SAP CRM 我们使用所谓的Application Enhancement Tool(AET)来创建扩展字段。首先在Personalize里将Configu...

JerryWang_SAP
25分钟前
3
0
Vue-Element-Upload

记录一下文件上传封装Js 代码示例 封装:uploadFile.vue <template> <el-upload v-model="attachment" ref="upload" class="upload-demo" :action="uploadUrl" ......

华山猛男
31分钟前
2
0
AWVS破解及使用手册

1.安装 因为是windows软件,比较简单,此部分略: 破解插件下载: 链接: https://pan.baidu.com/s/1x9LK9F3KvqDgTvXDjoSZnQ 提取码: 7k4u 2.创建扫描目标 2-1.Targets->Add Target 2-2.对话框...

硅谷课堂
34分钟前
1
0
Centos 7 安装Zabbix 3.4

Zabbix 3.4 支持Centos 7。貌似不支持6.9. 更多详细内容请参考官方说明文档,详细的安装要求不贴出来了。 https://www.zabbix.com/documentation/3.4/zh/manual/installation/requirements 虚...

linjin200
39分钟前
1
0
阿里云数据库HybridDB for PostgreSQL使用教程

云数据库HybridDB for PostgreSQL(ApsaraDB HybridDB for PostgreSQL)是一种在线MPP大规模并行处理数据仓库服务。云数据库HybridDB for PostgreSQL基于Greenplum Database开源数据库项目,...

mcy0425
48分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部