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非常相识,方 ...
随机推荐
- CSS快速入门-定位(position)
一.概述 CSS 定位 (Positioning) 属性允许你对元素进行定位. 定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的 ...
- ATmega8仿真——LED 数码管的学习
1. I/O 口的结构及特点 Atmega8 有23 个I/O 引脚,分成3 个8 位的端口B.C 和D,其中C 口只有7 位 Atmega8 采用3个8位寄存器来控制I/O端口,它们分别是:方向寄存 ...
- android安卓生成密钥keystore(命令控制)
android安卓生成密钥keystore(命令控制) • 配置JDK 详细教程 https://blog.csdn.net/u012934325/article/details/73441617/ ...
- 《杜增强讲Unity之Tanks坦克大战》2-场景设置
2 场景设置 2.1 本节效果预览 2.2 项目目录设置 点击Project面板的Create按钮,在根目录下面新建wm文件夹 Wm文件夹用于存放我们自己生成的Prefab和脚本等其他资源, ...
- python 基础篇01
一.python介绍年的圣诞节期间,吉多亿个文件的上传和下载千万张照片被分享,全部用倍年,为了打发圣诞节假期,年,第一个Python编译器诞生.它是用C语言实现的,并能够调用C语言的库文件.从一出生, ...
- Datawhale MySQL 训练营 Task4 表联结
学习内容 MySQL别名 列别名,将查询或者筛选出来列用AS 命名,如果有空格则需要引号 '' SELECT xxx AS xxxx FROM WHERE GROUP BY HAVING 表别名, 把 ...
- k8s踩坑记第1篇--rc无法创建
六一快乐!!! 什么是k8s,我不想解释,百度资料有很多,本系列只踩坑,不科普. 问题描述: 做Hello World的例子,结果get pods一直显示没有资源? 应用配置代码: apiVersio ...
- Netty源码分析第7章(编码器和写数据)---->第4节: 刷新buffer队列
Netty源码分析第七章: 编码器和写数据 第四节: 刷新buffer队列 上一小节学习了writeAndFlush的write方法, 这一小节我们剖析flush方法 通过前面的学习我们知道, flu ...
- ats编译中增加透明度 选项
在大多数情况下,如果环境支持透明度,则configure将自动启用它.对于其他环境,可能需要 配置configure 选项. --enable-posix-cap 这实现了POSIX功能,这是透明度所 ...
- Hyperledger Fabric CA User’s Guide——开始(三)
Fabric CA User’s Guide——开始 先决条件 安装Go 1.9+ 设置正确的GOPATH环境变量 安装了libtool和libtdhl-dev包 下面是在Ubuntu上安装libto ...