文档章节

HTML5 本地存储Web Storage

nao
 nao
发布于 2015/12/11 16:47
字数 668
阅读 95
收藏 12
点赞 0
评论 0

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
博文 147
码字总数 107499
作品 0
徐汇
HTML5学习之Web Storage基础知识

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

CHIEMINCHAN ⋅ 05/11 ⋅ 0

HTMl5的sessionStorage和localStorage

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

lg2045 ⋅ 2014/10/09 ⋅ 0

HTML5 本地存储

HTML5的本地化存储标准主要有以下3类: (1) Web Storage (2) Web SQL Database (3) IndexedDB 一、Web Storage Web Storage是目前得到支持最广泛的HTML5本地存储规范,IE 8+、FF 3.5+、Safar...

Aaron_DMC ⋅ 2016/11/21 ⋅ 1

HTMl5的sessionStorage和localStorage的使用

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

刘阳0292 ⋅ 2017/07/09 ⋅ 0

HTML5在客户端存储数据的新方法——localStorage

HTML5在客户端存储数据的新方法——localStorage localStorage作为HTML5本地存储web storage特性的API之一,主要作用是将数据保存在客户端中,而客户端一般是指上海网站设计用户的计算机。 ...

祈澈姑娘 ⋅ 2017/12/19 ⋅ 0

HTML5本地存储

HTML5中的 Web Storage 包括两种存储方式: sessionStorage 和 localStorage 本地离线存储,同域下只能存储 5M 的空间;IE6.7中可以用 UserData 来实现 sessionStorage 用于本地存储一个会话...

Jayier ⋅ 2014/08/14 ⋅ 2

HTML5-localStorage、sessionStorage用法总结

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

iNiL0119 ⋅ 2015/03/21 ⋅ 0

HTML5 进阶系列:web Storage

前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage。 这两种方式都是通过键值对保存数据,存取方便,不影响网站性能。他们的用法相同,存储时间不同。localStorag...

林鑫 ⋅ 2017/04/26 ⋅ 0

Web Storage 与cookies

Web Storage介绍 Web Storage带来的好处 减少网络流量:一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间不必要地来回传递。快速...

黄黄黄 ⋅ 2017/11/17 ⋅ 0

html5 sessionStorage 与 localStorage使用详解

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

Adam-Lee ⋅ 2012/08/22 ⋅ 1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

spring Email

使用spring发Email其实就是使用spring自己封装携带的一个javamail.JavaMailSenderImpl类而已。这个类可以当一个普通的java对象来使用,也可以通过把它配置变成spring Bean的方式然后注入使用...

BobwithB ⋅ 14分钟前 ⋅ 0

spark 整理的一些知识

Spark 知识点 请描述spark RDD原理与特征? RDD全称是resilient distributed dataset(具有弹性的分布式数据集)。一个RDD仅仅是一个分布式的元素集合。在Spark中,所有工作都表示为创建新的...

tuoleisi77 ⋅ 17分钟前 ⋅ 0

思考

时间一天天过感觉自己有在成长吗?最怕的是时光匆匆而过,自己没有收获!下面总结下最近自己的思考。 认识自己 认识另一个自己,人们常说要虚心听取别人意见和建议。然而人往往是很难做到的,...

hello_hp ⋅ 17分钟前 ⋅ 0

IT行业的变革就像世界杯德国对战墨西哥一样难以预测[图]

最近在观看世界杯,尤其是昨天的比赛,上一届卫冕冠军德国队居然0:1告负墨西哥,这创造了历史,首先是墨西哥从来没赢过德国队,其次是德国队36年来首站没输过,再差也是打平,而这次,德国队...

原创小博客 ⋅ 36分钟前 ⋅ 0

解决CentOS6、7,/etc/sysconfig/下没有iptables的问题

一、Centos 6版本解决办法: 1.任意运行一条iptables防火墙规则配置命令: iptables -P OUTPUT ACCEPT 2.对iptables服务进行保存: service iptables save 3.重启iptables服务: service ...

寰宇01 ⋅ 46分钟前 ⋅ 2

数据库备份和恢复

备份:mysqldump -u root -p 数据库>磁盘路径 恢复:mysql -u root -p 数据库<sql脚本的磁盘路径

anlve ⋅ 今天 ⋅ 0

发生了什么?Linus 又发怒了?

在一个 Linux 内核 4.18-rc1 的 Pull Request 中,开发者 Andy Shevchenko 表示其在对设备属性框架进行更新时,移除了 union 别名,这引发了 Linus 的暴怒。 这一次 Linus Torvalds 发怒的原...

问题终结者 ⋅ 今天 ⋅ 0

在树莓派上搭建一个maven仓库

在树莓派上搭建一个maven仓库 20180618 lambo init 项目说明 家里有台树莓派性能太慢。想搭建一个maven私服, 使用nexus或者 jfrog-artifactory 运行的够呛。怎么办呢,手写一个吧.所在这个...

林小宝 ⋅ 今天 ⋅ 0

Spring发展历程总结

转自与 https://www.cnblogs.com/RunForLove/p/4641672.html 目前很多公司的架构,从Struts2迁移到了SpringMVC。你有想过为什么不使用Servlet+JSP来构建Java web项目,而是采用SpringMVC呢?...

onedotdot ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部