localStorage（本地存储）,可以长期存储数据，没有时间限制，一天，一年，两年甚至更长，数据都可以使用。sessionStorage（会话存储），只有在浏览器被关闭之前使用，创建另一个页面时同意可以使用，关闭浏览器之后数据就会消失。

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。我们这里以 localStorage 为例，简要介绍下 HTML5 的本地存储，并针对如遍历等常见问题作一些示例说明。 localStorage 是 HTML5 本地存储的 API，使用键值对的方式进行存取数据，存取的数据只能是字符串。不同浏览器对该 API 支持情况有所差异，如使用方法、最大存储空间等。

一、localStorage API 基本使用方法

localStorage API 使用方法简单易懂，如下为常见的 API 操作及示例： 设置数据：localStorage.setItem(key,value); 示例：

1
2
3
for(var i=0; i<10; i++){
 localStorage.setItem(i,i);
}

获取数据：localStorage.getItem(key) 获取全部数据：localStorage.valueOf() 示例：

1
2
3
for(var i=0; i<10; i++){
 localStorage.getItem(i);
}

删除数据：localStorage.removeItem(key) 示例：

1
2
3
for(var i=0; i<5; i++){
 localStorage.removeItem(i);
}

清空全部数据：localStorage.clear() 获取本地存储数据数量：localStorage.length 获取第 N 个数据的 key 键值：localStorage.key(N)


2. 遍历 key 键值方法

1
2
3
for(var i=localStorage.length - 1 ; i >=0; i--){
 console.log('第'+ (i+1) +'条数据的键值为：' + localStorage.key(i) +'，数据为：' + localStorage.getItem(localStorage.key(i)));
}

3. 存储大小限制测试及异常处理

3.1 数据存储大小限制测试

不同浏览器对 HTML5 的本地存储大小基本均有限制，一个测试的结果如下：

1
2
3
4
5
IE 9          > 4999995 + 5 = 5000000
firefox 22.0 > 5242875 + 5 = 5242880
chrome  28.0  > 2621435 + 5 = 2621440
safari  5.1   > 2621435 + 5 = 2621440
opera   12.15 > 5M （超出则会弹出允许请求更多空间的对话框）

测试代码参考：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
<script>
 function log( msg ) {
     console.log(msg);
     alert(msg);
 }</p>
<p> var limit;
 var half = '1'; //这里会换成中文再跑一遍
 var str = half;
 var sstr;
 while ( 1 ) {
     try {
         localStorage.clear();
         str += half;
         localStorage.setItem( 'cache', str );
         half = str;
     } catch ( ex ) {
         break;
     }
 }
 var base = str.length;
 var off = base / 2;
 var isLeft = 1;
 while ( off ) {
     if ( isLeft ) {
         end = base - (off / 2);
     } else {
         end = base + (off / 2);
     }</p>
<p>     sstr = str.slice( 0, end );
     localStorage.clear();
     try {
         localStorage.setItem( 'cache', sstr );
         limit = sstr.length;
         isLeft = 0;
     } catch ( e ) {
         isLeft = 1;
     }</p>
<p>     base = end;
     off = Math.floor( off / 2 );
 }</p>
<p> log( 'limit: ' + limit );
</script>
</html>

3.2 数据存储异常处理

1
2
3
4
5
6
7
8
9
10
try{
 localStorage.setItem(key,value);
}catch(oException){
 if(oException.name == 'QuotaExceededError'){
  console.log('超出本地存储限额！');
  //如果历史信息不重要了，可清空后再设置
  localStorage.clear();
  localStorage.setItem(key,value);
 }
}

总结：

H5的两种存储技术的最大区别就是生命周期。localStorage是本地存储，存储期限不限；sessionStorage会话存储，页面关闭数据就会丢失。

使用方法：

localStorage.setItem（“key”，“value”）//存储

localStorage.getItem（key）//按key进行取值

localStorage.valueOf( )//获取全部值

localStorage.removeItem(key)//删除单个值

localStorage.clear()//删除全部数据

localStorage.length//获得数据的数量

localStorage.key(N)//获得第N个数据的key值

注：localStorage和sessionStorage用法相同

使用HTML5 Web存储的localStorage和sessionStorage方式的更多相关文章

  1. HTML5 web存储之LocalStorage和sessionStorage

    什么是localstorage 前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题: ① cookie大 ...

  2. HTML5本地存储之localStorage、sessionStorage

    1.概述 localStorage和sessionStorage统称为Web Storage,它使得网页可以在浏览器端储存数据. sessionStorage保存的数据用于浏览器的一次会话,当会话结束 ...

  3. html5 Web Storage（localStorage()，sessionStorage()）

    Web Storage包括了两种存储方式:sessionStorage和localStorage sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束 ...

  4. HTML 5 Web 存储：localStorage和sessionStorage

    本文内容摘自http://www.w3school.com.cn/ 在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessi ...

  5. (转)HTML5开发学习（2）:本地存储之localStorage 、sessionStorage、globalStorage

    原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(2):本地存储之localStorage ...

  6. html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例

    这篇文章主要介绍了html5本地存储的localstorage .本地数据库.sessionStorage简单使用示例,需要的朋友可以参考下 html5的一个非常cool的功能,就是web stora ...

  7. web 本地存储 （localStorage、sessionStorage）

    web 本地存储 (localStorage.sessionStorage,cookie) localStorage(长期储存):即使关闭浏览器数据也不会删除,除非使用localStorage.cle ...

  8. [web 前端] web本地存储（localStorage、sessionStorage）

    cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...

  9. web本地存储（localStorage、sessionStorage）

    web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...

随机推荐

  1. 【VR视频播放】解决Unity模型贴图反转的问题

    使用UV贴图网模型上贴的时候, 会出现图片反过来的情况. 根本原因是因为, 一般系统的屏幕坐标系(例如Android)是左上角为原点(0,0), 但是Unity的贴图是以左下角为原点(0,0) 方法有 ...

  2. asp.net 预编译和动态编译

    在asp.net中,编译可以分为:动态编译Dynamical Compilation和预编译(Precompilation). 动态编译 深入剖析ASP.NET的编译原理之一:动态编译(Dynamic ...

  3. Javascript基础系列之（八）Javascript的调试与优化

    Javascript的错误主要是语法错误和运行时的错误,前者在代码解析时就会出错,影响程序的运行.后者称为异常,影响它所运行的线程.下面就Javascript常见错误进行分析 1.常见的错误和异常 i ...

  4. 第十一章：WEB浏览器中的javascript

    客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...

  5. Intelli IDEA 14.04开发版+注册码

    Idea,一款比较出色的IDE开发工具,懂她的人,自然懂得. 本版本-14.04+注册码 注册界面  注册码:               Name:happy                KEY: ...

  6. [NOIP2011] 提高组 洛谷P1315 观光公交

    题目描述 风景迷人的小城Y 市,拥有n 个美丽的景点.由于慕名而来的游客越来越多,Y 市特意安排了一辆观光公交车,为游客提供更便捷的交通服务.观光公交车在第 0 分钟出现在 1号景点,随后依次前往 2 ...

  7. BZOJ1588 HNOI2002 营业额统计 [Splay入门题]

    [HNOI2002]营业额统计 Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 4128  Solved: 1305 Description 营业额统计 ...

  8. Android消息通知（notification）和PendingIntent传值

    通知栏的自定义布局:转:http://blog.csdn.net/vipzjyno1/article/details/25248021 拓展 实现自定义的通知栏效果: 这里要用到RemoteViews ...

  9. Redux初探与异步数据流

    基本认知 先贴一张redux的基本结构图 原图来自<UNIDIRECTIONAL USER INTERFACE ARCHITECTURES> 在这张图中,我们可以很清晰的看到,view中产 ...

  10. PRML Chapter 1. Introduction

    PRML Chapter 1. Introduction 为了防止忘记,要把每章的重要内容都记下来,从第一章开始 2012@3@28 今天又回去稍微翻了一下第一章内容,发现第一次看的时候没有看透,每次 ...