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非常相识,方 ...
随机推荐
- jmeter no-gui模式动态传递场景参数
jmeter进行性能压测时,有时候需要在linux上no-gui模式下运行,为了在no-gui模式下更方便的设置脚本的运行的场景, 将脚本的线程数,运行时间设置为动态参数,可以在脚本运行时动态设置“线 ...
- 一款好看的Sublime Text浅色主题:Ayu大作
上一篇分享的VS Code的文中,界面也是浅色主题,也是Ayu作品.下面看一下Sublime Text中的Ayu浅色主题 不错吧. 如何下载? 首选项——插件控制——安装插件或者ctrl+shift+ ...
- [翻译] Python 3.5中async/await的工作机制
Python 3.5中async/await的工作机制 多处翻译出于自己理解,如有疑惑请参考原文 原文链接 身为Python核心开发组的成员,我对于这门语言的各种细节充满好奇.尽管我很清楚自己不可能对 ...
- 人在囧途——Java程序猿学习Python
引言 LZ之前其实一直对python都很好奇,只是苦于平时没有时间去了解它,因此趁着51假期这个机会,便迫不及待的开始了自己的探索.作为一个标准的Java程序猿,在了解python的过程当中,LZ遇到 ...
- postMan测试Controller接口
1.介绍 Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件. 2.安装 Postman 4.1.2 下载地址: http://files.cnblogs.com/file ...
- AndroidStudio下使用 RecyclerView xml文件不显示预览条目并报错类似:NoClassDefFoundError 问题解决
在项目中使用RecyclerView是很普遍的,最近工作中遇到了这种情况: RecyclerView可以正常使用 不会报错 但是在layout中的xml文件中不显示并且报错,如下图:(报的错忘了截了, ...
- 人工智能AI芯片与Maker创意接轨 (中)
在人工智能AI芯片与Maker创意接轨(上)这篇文章中,介绍人工智能与深度学习,以及深度学习技术的应用,了解内部真实的作业原理,让我们能够跟上这波AI新浪潮.系列文来到了中篇,将详细介绍目前市面上的各 ...
- 2.5星|《AI进化论》:疑似基于PPT与公关稿整理汇编而成
AI进化论·解码人工智能商业场景与案例 全书是目前AI在一些热门领域的应用的介绍,包括各行业内AI可以实现的功能.现有相关公司的具体业务等.对各公司的介绍仅限于能实现什么业务,具体做的怎么样,有什么优 ...
- docker 从本地拷贝文件
1.找到docker的ID全称 docker inspect -f '{{.Id}}' docker_name 2.执行拷贝命令 docker cp 本地文件路径 ID全称:docker路径 3.如果 ...
- python 原生态调用server服务————SimpleHTTPServer
python 原生态调用server服务,接收http传递的参数并且处理返回结果 很多blog中都是抄了官网的,没有说明参数如何接收 1.代码中提供了post与get两种方式来发起请求,但是传递参数时 ...