HTML5 本地存储（Web Storage）

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

localStorage - 本地永久存储，下次打开浏览器数据依然存在
sessionStorage - 只存在于一个会话的数据存储，关闭浏览器数据会被清除

注意：1）只要清除浏览器cookie，两种存储方式的数据都会被清除2）对于不同的网站，数据存储于不同的区域，各网站只能访问其自身的数据3）浏览器之间的数据是各自独立的（比如Firefox中使用localStorage存储一组数据，在Chrome浏览器下是无法读取的）

1、目前大部分的浏览器已支持web storage, 当然也可以检测一下：

1     if (!window.localStorage) {
2         alert('您的浏览器不支持localStorage');
3     }
4
5     if (!window.sessionStorage) {
6         alert('您的浏览器不支持sessionStorage');
7     }

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:

1 <div>
2     进入页面次数(localStorage)：<mark id="local"></mark> time(s)
3     <br>
4     进入页面次数(sessionStorage)：<mark id="session"></mark> time(s)
5 </div>

Javascript:

1 //记录localStorage进入页面次数
2 var count1 = localStorage.getItem('localCount') ? parseInt(localStorage.getItem('localCount')) + 1 : 1;
3 localStorage.setItem('localCount', count1);
4 document.getElementById('local').innerHTML = count1;
5
6 //记录sessionStorage进入页面次数
7 var count2 = sessionStorage.getItem('sessionCount') ? parseInt(sessionStorage.getItem('sessionCount')) + 1 : 1;
8 sessionStorage.setItem('sessionCount', count2);
9 document.getElementById('session').innerHTML = count2;

step1：进入chrome刷新页面10次

step2：关闭chrome再重新打开

说明：关闭页面后，sessionStorage 的值丢失

step3：第一次进入firefox

说明：浏览器之间的数据是各自独立的，firefox 读取不到 chrome的客户端存储数据

step4：清空chrome的cookie

说明：清空cookie，localStorage 与 sessionStorage 的数据均被清除

源代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>在客户端存储数据</title>
 6 </head>
 7 <body>
 8 <div>
 9     进入页面次数(localStorage)：<mark id="local"></mark> time(s)
10     <br>
11     进入页面次数(sessionStorage)：<mark id="session"></mark> time(s)
12 </div>
13  <script>
14      if (window.localStorage) { //sessionStorage
15          //记录localStorage进入页面次数
16          var count1 = localStorage.getItem('localCount') ? parseInt(localStorage.getItem('localCount')) + 1 : 1;
17          localStorage.setItem('localCount', count1);
18          document.getElementById('local').innerHTML = count1;
19
20          //记录sessionStorage进入页面次数
21          var count2 = sessionStorage.getItem('sessionCount') ? parseInt(sessionStorage.getItem('sessionCount')) + 1 : 1;
22          sessionStorage.setItem('sessionCount', count2);
23          document.getElementById('session').innerHTML = count2;
24      }
25  </script>
26 </body>
27 </html>

View Code

转载于:https://www.cnblogs.com/bean-sprout/p/5913634.html

HTML5 本地存储（Web Storage）相关推荐

HTML5 本地存储 Web Storage
Web Storage Web Storage 是一项非常重要,并且很实用的技术,已经被大多数浏览器(包括IE8)所支持, 在HTML4时代, 虽然cookie无处不在,但cookie仍然有自己的硬伤 ...
（五）HTML5本地存储——Web Storage
Web应用的发展,使得客户端存储使用得也越来越多,而实现客户端存储的方式则是多种多样.最简单而且兼容性最佳的方案是Cookie,但是作为真正的客户端存储,Cookie则存在很多致命伤.此外,在IE6及 ...
html5 本地存储Web Storage
在过去本地存储数据基本都是使用cookies保存一些简单的数据,使用cookies存储永久数据存在以下几个问题: 1.cookies的大小被限制在4KB: 2.cookies是随HTTP事务一起发送的 ...
HTML5本地存储——Web SQL Database
在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...
HTML5本地存储——IndexedDB
在HTML5本地存储--Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
HTML5本地存储之Web Storage篇
2019独角兽企业重金招聘Python工程师标准>>> Web Storage是HTML5引入的一个非常重要的功能,在前端开发中经常用到,可以在客户端本地存储数据,类似HTML4的c ...
【学习HTML5】网页存储Web Storage技术
Web Storage组成 Web Storage实际上由两部分组成:sessionStorage与localStorage . sessionStorage用于本地存储一个会话(session)中的 ...
HTML5 本地存储
HTML5 本地存储 1.sessionStorage 2.localStorage 3.Database Storage 4.globalStorage 5.兼容性参考文献本地持久化存储一直是本 ...
HTML5本地存储不完全指南
历史在HTML5本地存储之前,如果我们想在客户端保存持久化数据,有这么几个选择: HTTP cookie.HTTP cookie的缺点很明显,最多只能存储4KB的数据,每个HTTP请求都会被传送回服 ...
H5本地储存Web Storage
一.本地存储由来的背景由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...

HTML5 本地存储（Web Storage）

HTML5 本地存储（Web Storage）相关推荐

最新文章

热门文章