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非常相识,方 ...
随机推荐
- Python标准库学习之zipfile模块
ZipFile模块里有两个非常重要的class, 分别是 ZipFile和ZipInfo. ZipFile是主要的类,用来创建和读取zip文件,而ZipInfo是存储的zip文件的每个文件的信息的. ...
- 经典简约风格教师求职简历免费word模板
20款经典简约风格教师求职简历免费word模板,也可用于其他专业和职业,个人免费简历模板,个人简历表免费,个人简历表格. 声明:该简历模板仅用于个人欣赏使用,请勿用于商业用途,谢谢. 下载地址:百度网 ...
- hdu1272小希的迷宫(并查集判断回路和是否连通)
传送门 迷宫中不能有回路,还要连通 如果最后集合数是一个那就是连通,否则不联通 要合并的两个顶点在相同集合内,表示出现了回路 输入时注意一下 #include<bits/stdc++.h> ...
- Altium中坐标的导出及利用坐标快速布局
器件的坐标其实在我们处理布局的时候,非常有用,例如A板布局导入B板. 1.在A板PCB中执行菜单命令“File-Assembly-Generates Pick and Place File”对器件的坐 ...
- 相机标定与矫正opencv+MATLAB
博客转载自:http://blog.csdn.net/Loser__Wang/article/details/51811347 本文目的在于记录如何使用MATLAB做摄像机标定,并通过opencv进行 ...
- 增强学习训练AI玩游戏
1.游戏简介 符号A为 AI Agent. 符号@为金币,AI Agent需要尽可能的接取. 符号* 为炸弹,AI Agent需要尽可能的躲避. 游戏下方一组数字含义如下: Bomb hit: 代表目 ...
- Spark概述及集群部署
Spark概述 什么是Spark (官网:http://spark.apache.org) Spark是一种快速.通用.可扩展的大数据分析引擎,2009年诞生于加州大学伯克利分校AMPLab,2010 ...
- python—启动自带shell时报错(丢失api-ms-win-crt-runtime-l1-1-0.dll)已解决
备注: 有的伙伴安装完1后重启,问题可以解决,summer儿在安装完1依然未能解决,于是又进行了2的安装再次重启后问题解决!! 1,安装vc-redist.x64,微软官网搜索免费下载,安装后重启. ...
- GTK 预置对话框 GtkDialog 文件/颜色/字体选取等 GtkFileSelection
(GTK2) 文档链接 作用:打开一个预置的对话框,如文件选取对话框 GtkFileSelection 效果下图所示 ╰── GtkDialog ├── GtkAboutDialog ├── GtkC ...
- 一个demo 理解 vuex
相比接触vue的同学们已经看了官方文档了.这里我用一个简单的demo来阐述下vuex的知识点,虽然简单,但是容易理解.也加深自己的记忆. 用脚手架建立个项目vue init webpakc-simpl ...