HTML5 本地存储（Web Storage）
HTML5 提供了两种在客户端存储数据的新方法：
- localStorage - 本地永久存储，下次打开浏览器数据依然存在
- sessionStorage - 只存在于一个会话的数据存储，关闭浏览器数据会被清除
注意：
1）只要清除浏览器cookie，两种存储方式的数据都会被清除
2）对于不同的网站，数据存储于不同的区域，各网站只能访问其自身的数据
3）浏览器之间的数据是各自独立的（比如Firefox中使用localStorage存储一组数据，在Chrome浏览器下是无法读取的）
1、目前大部分的浏览器已支持web storage, 当然也可以检测一下：
if (!window.localStorage) {
alert('您的浏览器不支持localStorage');
}
if (!window.sessionStorage) {
alert('您的浏览器不支持sessionStorage');
}
2、方法
localStorage，sessionStorage 有5个方法，使用方法一致，以下localStorage为例：
localStorage.setItem([string] key, [string] value); //本地客户端存储一个字符串类型的数据
localStorage.getItem([string] key); //可以读取已知key值的value
localStorage.removeItem([string] key); //删除指定key的item
localStorage.clear(); //清除localstorage所有key/value键位对
- localStorage.key([number] index); //得到某个索引的key
3、示例
记录进入页面次数，查看 localStorage 与 sessionStorage 存储数据的变化。
Html:
<div>
进入页面次数(localStorage)：<mark id="local"></mark> time(s)
<br>
进入页面次数(sessionStorage)：<mark id="session"></mark> time(s)
</div>
Javascript:
//记录localStorage进入页面次数
var count1 = localStorage.getItem('localCount') ? parseInt(localStorage.getItem('localCount')) + 1 : 1;
localStorage.setItem('localCount', count1);
document.getElementById('local').innerHTML = count1; //记录sessionStorage进入页面次数
var count2 = sessionStorage.getItem('sessionCount') ? parseInt(sessionStorage.getItem('sessionCount')) + 1 : 1;
sessionStorage.setItem('sessionCount', count2);
document.getElementById('session').innerHTML = count2;
step1：进入chrome刷新页面10次
step2：关闭chrome再重新打开
说明：关闭页面后，sessionStorage 的值丢失
step3：第一次进入firefox
说明：浏览器之间的数据是各自独立的，firefox 读取不到 chrome的客户端存储数据
step4：清空chrome的cookie
说明：清空cookie，localStorage 与 sessionStorage 的数据均被清除
源代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>在客户端存储数据</title>
</head>
<body>
<div>
进入页面次数(localStorage)：<mark id="local"></mark> time(s)
<br>
进入页面次数(sessionStorage)：<mark id="session"></mark> time(s)
</div>
<script>
if (window.localStorage) { //sessionStorage
//记录localStorage进入页面次数
var count1 = localStorage.getItem('localCount') ? parseInt(localStorage.getItem('localCount')) + 1 : 1;
localStorage.setItem('localCount', count1);
document.getElementById('local').innerHTML = count1; //记录sessionStorage进入页面次数
var count2 = sessionStorage.getItem('sessionCount') ? parseInt(sessionStorage.getItem('sessionCount')) + 1 : 1;
sessionStorage.setItem('sessionCount', count2);
document.getElementById('session').innerHTML = count2;
}
</script>
</body>
</html>
HTML5 本地存储（Web Storage）的更多相关文章
- HTML5 本地存储Web Storage简单了解
HTML5本地存储规范,定义了两个重要的API :Web Storage 和 本地数据库Web SQL Database. 本地存储Web Storage 实际上是HTML4的cookie存储机 ...
- HTML5本地存储 Web Storage
Web Storage基本介绍 HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API sessionStorage 和 localStorage,二者的差异主要是数 ...
- html5本地存储web storage的简单使用
html5的一个非常cool的功能,就是web storage,类似于之前的cookie,不过与之不同的是,web storage 拥有本地5兆的容量可以存储,而cookie却只有4K,这是完全不能比 ...
- HTML5本地存储——Web SQL Database
在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...
- [转]HTML5本地存储——Web SQL Database
在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...
- HTML5本地存储(Local Storage) 的前世今生
长久以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势.对于桌面应用(或者原生应用),操作系统一般都提供了一个抽象层用来帮助应用程序保存其本地数据 例如(用户配置信息或者运行时状态等). 常 ...
- HTML5本地存储——Web SQL Database与indexedDB
虽然在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数 ...
- 本地存储 web storage
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- html5本地存储 local storage
HTML5 web storage, a better local storage than cookies. With HTML5, web pages can store data locally ...
- HTML5本地存储——IndexedDB（一：基本使用）
在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
随机推荐
- Mysql储存过程4:mysql变量设置
默认全局变量是两个@@开头, 可用show variables查看所有默认变量: @@user #declare定义变量只能用在储存过程中 #declare 变量名 数据类型 可选类型 declare ...
- Mac Sublime Vim模式 方向键无法长按
终端输入 sublime2: defaults write com.sublimetext.2 ApplePressAndHoldEnabled -bool false sublime3: defau ...
- <mvc:annotation-driven/>都做了那些事情
mvc:annotation-driven是一种简写的配置方式,那么mvc:annotation-driven到底做了哪些工作呢?如何替换掉mvc:annotation-driven呢? <mv ...
- Excel---导出与读取（大数据量）
Excel下载 首先大数据量的下载,一般的Excel下载操作是不可能完成的,会导致内存溢出 SXSSFWorkbook 是专门用于大数据了的导出 构造入参rowAccessWindowSize 这个参 ...
- scikit-learn模块学习笔记(数据预处理模块preprocessing)
本篇文章主要简单介绍sklearn中的数据预处理preprocessing模块,它可以对数据进行标准化.preprocessing 模块提供了数据预处理函数和预处理类,预处理类主要是为了方便添加到pi ...
- 次短路经（dijsktra）
#include <cstdio>#include <cstring>#include <queue>#include <algorithm>#defi ...
- HDU 2647 Reward（拓扑排序+判断环+分层）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2647 题目大意:要给n个人发工资,告诉你m个关系,给出m行每行a b,表示b的工资小于a的工资,最低工 ...
- Roman to Integer & Integer to Roman
题目: Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range from ...
- JS 数据类型转换以其他
JavaScript 是一种弱类型的语言,也就是没有类型限制,变量可以随时被赋予任意值. 同时,在程序运行过程中,类型会被自动确认的.因此,这就是涉及到数据的类型转换.在 JS 的世界中,数据类型转换 ...
- 原生js粘贴复制【源码】
<html> <head> <meta charset="UTF-8"> <title>9行代码实现复制内容至剪切板</tit ...