早期的web中使用cookies在客户端保存诸如用户名等简单的信息，但是，在使用cookies存储永久数据存在以下问题。

1.cookies的大小限制在4kB，不适合大量的数据存储。

2.浏览器还限制站点可以在用户计算机上存储的cookies的数量。

3 cookies是随HTTP事务一起被发送的，因此会浪费一部分带宽。

HTML5很好的提供了本地存储的功能，以键值对存储的解决方案，支持容量至少为4M，HTML5的web提供了两种客户端存储方式。

1.localStorage：是一种没有时间限制的数据存储方式，可以将数据永久保存在客户端。

sessionStorage：指的是针对一个session的数据存储，即将数据保存在session对象中，当关闭浏览器后，这些数据就被删除。

在使用web存储之前，应该先检查一下浏览器是否支持localStorage和sessionStorage(I7以下不支持)

判断方法

if(typeof(localStorage !=='undefined'){

};

或者if(window.localStorage){

}

web Storage支持的属性与方法

getItem(key):获取指定key所存储的value值

key(index)方法：返回列表中对应索引的key值

length属性：返回key/value队列的长度

removeItem(key)方法：从Storage中删除一个对应的键值对。

setItem(key,value)方法：将value存储到key指定的字段。

clear()方法：移除所有的内容

注意:设置，获取key/value的方法除了使用setItem()和getItem()方法以外，还分别提供了一个简单的方法：设置方法：sessionStorage.someKey = 'someValue'

获取方法：alert(sessionStorage.someKey);

下面一个例子来说明一下。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <link href="localstorage.css" type="text/css" rel="stylesheet"/>

    <script src="Storage.js" type="text/javascript"></script>

</head>

<body>

<input id="t1" type="text" />

<button id ="add"  >添加</button>

<button id ='remove'>删除</button><br/>

<textarea id="t2" readonly="readonly"></textarea>

</body>

</html>

css

#t2{

    width:500px;

    height:400px;

    margin-top:10px;

}

js

window.onload = function(){

    var content = document.getElementById('t1');

    var btn1 = document.getElementById('add');

    var btn2 =document.getElementById('remove');

    btn1.addEventListener('click',SaveInfo);

    btn2.addEventListener('click',clearInfo);

    function SaveInfo(){

        if(typeof localStorage !=='undefined'){

            if(localStorage.storage){

                localStorage.storage += content.value + '\n发表时间：'+(new Date()).toDateString() +'\n';

            }else{

                localStorage.storage = content.value + '\n发表时间：'+(new Date()).toDateString() +'\n';

            }

            ShowInfo()

        }else {

            alert('无法存储!')

        }

    }

    function clearInfo(){

        localStorage.removeItem('storage');

        ShowInfo()

    }

    function ShowInfo(){

        var txt = document.getElementById('t2');

        if(localStorage.storage){

            txt.value =localStorage.getItem('storage');

        }else{

            txt.value ='没有内容！'

        }

    }

}

html5 localStorage讲解的更多相关文章

  1. HTML5 LocalStorage 本地存储

    HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...

  2. (转载)HTML5 LocalStorage 本地存储

    原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地 ...

  3. localStorage存值取值以及存取JSON,以及基于html5 localStorage的购物车

    localStorage.setItem("key","value");//存储变量名为key,值为value的变量 localStorage.key = &q ...

  4. HTML5 LocalStorage 本地存储（转）

    原文:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地存储 ...

  5. HTML5 LocalStorage Demo

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  6. 原生JavaScript常用本地浏览器存储方法四(HTML5 LocalStorage sessionStorage)

    HTML5 LocalStorage浏览器的支持的情况如上图,IE在8.0的时候就支持了.不过需要注意的是,IE测试的时候需要服务器环境(或者localhost). 测试自然是检测浏览器是否支持本地存 ...

  7. 【HTML5 localStorage本地储存】简介&基本语法

    了解localStorage localStorage是最新的HTML5中的新技术,它主要是用于本地储存.最近看了看localStorage,发现比cookie好多用了,还比cookie简单多了.于是 ...

  8. HTML5 LocalStorage 本地存储原理详解

    首先自然是检测浏览器是否支持本地存储.在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在 ...

  9. HTML5 ---localStorage

    HTML5中提供了localStorage对象可以将数据长期保存在客户端,直到人为清除. localStorage提供了几个方法: 1.存储:localStorage.setItem(key,valu ...

随机推荐

  1. Tensorflow之多元线性回归问题（以波士顿房价预测为例）

    一.根据波士顿房价信息进行预测,多元线性回归+特征数据归一化 #读取数据 %matplotlib notebook import tensorflow as tf import matplotlib. ...

  2. 【转】认识JWT

    1. JSON Web Token是什么 JSON Web Token (JWT)是一个开放标准(RFC 7519),它定义了一种紧凑的.自包含的方式,用于作为JSON对象在各方之间安全地传输信息.该 ...

  3. 冒泡排序法（C语言）

    冒泡排序(Bubble Sort)一种计算机科学领域的较简单的排序算法.它重复地走访过要排序的元素列,依次比较两个相邻的元素,如果顺序(如从大到小.首字母从从Z到A)错误就把他们交换过来.走访元素的工 ...

  4. jenkins报错 Host key verification failed.

    一.Host key verification failed 问题描述 在本地windows机器上安装了jenkins,在git bash命令行窗口可以使用git pull命令,但是在jenkins ...

  5. Azure DevOps Server（TFS) 客户端分析

    Azure DevOps Server(TFS) 是微软公司的软件协作开发管理平台产品,为软件研发.测试.实施提供全流程的服务.作为一款应用服务器产品,他的客户端是什么,在哪里下载客户端?我们在项目实 ...

  6. ELK 框架整体流程编写 以及logstash脚本编写

    Elasticsearch Elasticsearch 是一个实时的分布式搜索和分析引擎,它可以用于全文搜索,结构化搜索以及分析.它是一个建立在全文搜索引擎 Apache Lucene 基础上的搜索引 ...

  7. POJ-2006 Litmus Test 高精度

    The pH scale measures the concentration of protons (H +) in a solution and, therefore, its acidity o ...

  8. 分布式中session共享的解决方案：spring-session

    Session是客户端与服务器通讯会话跟踪技术,是服务器与客户端保持整个通讯的会话基本信息.客户端在第一次访问服务器的时候,服务端会响应一个sessionId并且将它存入到本地的Cookie中,在之后 ...

  9. 如何判断服务器之间的服务是否可用？ping 还是 telnet？

    1. 背景 机器A需要调用机器B的服务,为此要保证服务的可用性,我们有时候用ping,有时候用telent来验证机器A和B的连通性,但有时候会出现这种情况,A可以ping通B,但A调用B的服务会一直报 ...

  10. 何谓SQLSERVER参数嗅探（转载）

    大家听到“嗅探”这个词应该会觉得跟黑客肯定有关系吧,使用工具嗅探一下参数,然后截获,脱裤o(∩_∩)o .事实上,我觉得大家太敏感了,其实这篇文章跟数据库安全没有什么关系,实际上跟数据库性能调优有关相 ...