HTML5 提供了两种在客户端存储数据的新方法localStorage,sessionStorage

  1. sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载

  2. 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)的更多相关文章

  1. html5的本地存储localStorage和sessionStorage

    html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...

  2. 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

    移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...

  3. 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用

    cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...

  4. 本地存储 localStorage/sessionStorage/cookie

    cookie是个基础的东西.是服务器发送到客户端,存储在客户端的一小段数据.可以存储一些配置信息,客户标识信息等.用户下次访问这个网站时,会把上次网站发来的cookie一同发送回去.cookie保存在 ...

  5. HTML5的本地存储 LocalStorage

    localStorage顾名思义,就是本地存储的意思,在以前很长一段时间,要想在客户端存 储一些配置及登录信息等数据都只能通过COOKIE或flash的方式,如今html5来临,也 带来了更强大的本地 ...

  6. web本地存储localStorage和sessionStorage

    用谷歌浏览器调试网页程序时候发现有一个这个栏目 记录本地存储的相关信息(cookie,sessionStorage,LocalStorage等)的存储信息 1.LocalStorage localst ...

  7. HTML5之本地存储localstorage

    Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...

  8. Html5 web本地存储

    Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...

  9. sessionStorage html5客户端本地存储之sessionStorage及storage事件

    可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相识,方 ...

随机推荐

  1. P3674 小清新人渣的本愿

    P3674 小清新人渣的本愿 一道妙不可言的题啊,,, 一看就知道是个莫队 考虑求答案 1号操作就是个大bitset,动态维护当前的bitset \(S\),把能取哪些值都搞出来,只要\(S\ and ...

  2. win8.1下右下角出现大小写切换状态显示框解决方案

    HKEY_LOCAL_MACHINE\SOFTWARE\Cambridge Silicon Radio\Harmony\Default双击右侧 OSD 将键值改成0 重启机器 成功关闭显示

  3. Python抓取歌词自制FreeStyle

    故事的起因是上周六看<中国好声音>,一个周杰伦战队的学员用人工智能写的歌词,于是乎,我也有了这个想法,代码的主题思路是看Crossin先生的文章,虽然最后不能写出一首歌,但是押韵脚这事情分 ...

  4. 关于SDK-manager中我们需要下载哪些?

    废话少说,直接看图说话…… 图片取自博客文章——链接跳转:点击跳转

  5. [PLC]ST语言五:STL/RET/CMP/ZCP

    一:STL/RET/CMP/ZCP 说明:简单的顺控指令不做其他说明. 控制要求:无 编程梯形图: 结构化编程ST语言: (*步进指令STL(EN,s);*) SET(M8002,S3); STL(T ...

  6. flask入门补充

    在上篇文章提到了json的编码问题.那么Flask是国外开发的框架,没有考虑到中文编码,那么我们就需要自己配置 那么在访问页面的时候会有 get 请求和post  请求.在下边我也会提到.以及没有接触 ...

  7. Jenkins管理插件(备份插件)

    Jenkins管理插件 为了让所有的插件在 Jenkins 内可用,所有插件的列表可以访问链接 − https://wiki.jenkins-ci.org/display/JENKINS/Plugin ...

  8. 角色和武器Shader特效开发

    角色Shader的动效需求 角Shader的开发不知要实现最基础光照等功能, 可能还要在角色武器的Shader增加多种动效, 比如因武器品质区分的流光特效, 被技能击中时的冻结效果. 这类动效的实现方 ...

  9. TP里where的查询方式,比如or应该怎么写?

    这应该是个基础..只是我没有系统的学TP,所以用到了临时查了手册. 正常来说,thinkphp里的查询方式是: ThinkPHP可以支持直接使用字符串作为查询条件,但是大多数情况推荐使用数组或者对象来 ...

  10. Flink架构分析之资源分配

    Task Slot     Flink中每个真正执行任务的TaskManager都是一个JVM进程,其在多线程环境中执行一个或者多个子任务.为了控制一个JVM同时能运行的任务数量,flink引入了ta ...