Html5 web 本地存储 (localStorage、sessionStorage)
HTML5 提供了两种在客户端存储数据的新方法localStorage,sessionStorage
sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载
localStorage(长期存储) :与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存在
web storage的浏览器支持情况
浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。要判断浏览器是否支持localStorage可以使用下面的代码:
if(window.localStorage){
alert("浏览支持localStorage")
}
else
{
alert("浏览暂不支持localStorage")
}
//或者 if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage") }
API
1,保存数据到本地
sessionStorage.setItem('key', value) //name 是本地存储的值的名字, value是本地存储值,注意value必须是字符串的形式
localStorage.setItem('key', value) //setItem把值存到本地,其中name 是本地存储的值的名字, value是本地存储值,注意value必须是字符串的形式
2,从本地获取数据
var data1 = JSON.parse(sessionStorage.getItem('key'));
var data2 = JSON.parse(localStorage.getItem('key'));
3,从本地删除某个数据
sessionStorage.removeItem('key');
localStorage.removeItem('key');
4,删除所有保存在本地的数据
sessionStorage.clear();
localStorage.clear();
chrome浏览器查看的方法
按F12,然后选择application就可以看到了

Cookie、session和localStorage、以及sessionStorage之间的区别:https://blog.csdn.net/ruby_xc/article/details/65939988
Html5 web 本地存储 (localStorage、sessionStorage)的更多相关文章
- html5的本地存储localStorage和sessionStorage
html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...
- 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题
移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...
- 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用
cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...
- 本地存储 localStorage/sessionStorage/cookie
cookie是个基础的东西.是服务器发送到客户端,存储在客户端的一小段数据.可以存储一些配置信息,客户标识信息等.用户下次访问这个网站时,会把上次网站发来的cookie一同发送回去.cookie保存在 ...
- HTML5的本地存储 LocalStorage
localStorage顾名思义,就是本地存储的意思,在以前很长一段时间,要想在客户端存 储一些配置及登录信息等数据都只能通过COOKIE或flash的方式,如今html5来临,也 带来了更强大的本地 ...
- web本地存储localStorage和sessionStorage
用谷歌浏览器调试网页程序时候发现有一个这个栏目 记录本地存储的相关信息(cookie,sessionStorage,LocalStorage等)的存储信息 1.LocalStorage localst ...
- HTML5之本地存储localstorage
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...
- Html5 web本地存储
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...
- sessionStorage html5客户端本地存储之sessionStorage及storage事件
可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相识,方 ...
随机推荐
- Html.RenderPartial与Html.RenderAction的区别
Html.RenderPartial与Html.RenderAction这两个方法都是用来在界面上嵌入用户控件的. Html.RenderPartial是直接将用户控件嵌入到界面上: <%Htm ...
- .NET:关于数据模型、领域模型和视图模型的一些思考
背景 数据模型.领域模型和视图模型是“模型”的三种角色,一些架构用一种类型表示这三种角色,如:传统三层架构.也有一些架构用两种类型表示这三种角色,如:结合ORM的领域驱动架构.非常少见的场景是用三种类 ...
- 如何为一个高负荷站点配置tomcat连接器(connector)【译文】(第一篇)
引言 最近正好要用到这些内容,因此就找了一篇比较有分量的文章,思来想去,还是尝试写一下译文吧.其实LZ的英语是非常烂的(四级没过的LZ眼泪掉下来),因此这篇文章翻译的水平LZ自己也不敢恭维.各位猿友大 ...
- WordPress函数wp_page_menu详解
说明 该标签显示带有链接的WordPress页面列表,并且可以选择将 Home(主页)自动显示为列表中的一员.该标签是自定义侧边栏和标题栏的好帮手,同时还可以用在其它模板中. WordPress教程 ...
- 【RabbitMQ】三种Exchange模式——订阅、路由、通配符模式
https://blog.csdn.net/ww130929/article/details/72842234
- Unity扩展编辑器五
扩展系统自带组件Inspector 可以在系统摄像机组建上添加一个按钮,这样就可以单独处理逻辑了
- Unity生成简易二维码
最近项目需求,需要在Unity中动态生成二维码.所以就研究了一下,下面把动态生成二维码的方法向大家分享一下. 第一种方法 需要一个 ZXing.dll文件. 下载地址我会在文章结尾给出. 直接将下载好 ...
- Mysql行转列的简单应用
最近在复习过程中愈发觉得,有些东西久了不用,真的会忘~——~. 将上面的表格转换为下面的表格 我拼sql拼了好久还是没弄出来,还是偶然看到我以前的笔记,才想起有行转列这样的操作(太久没有写过复杂点的s ...
- NAT概念解释(不完全版,但不会搞错...)
NAT在计算器网络中,网络地址转换(Network Address Translation,缩写为NAT),也叫做网络掩蔽或者IP掩蔽(IP masquerading)是一种IP数据包在通过路由器或防 ...
- Iron Speed Designer设计工具开发总结
9.0版本: 1.1 ISP和VS不要同时生成,代码写在override方法之下,不然生成之后会覆盖;正常情况下,ISP可以写代码,只不过没有快捷提示,一般我们先注释一下字段(如://sdsfdsfd ...