早期的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. luoguP4254 [JSOI2008]Blue Mary开公司

    题意 李超树裸题,注意一开始截距是\(S-P\). code: #include<bits/stdc++.h> using namespace std; #define ls(p) (p& ...

  2. 金山云笔试题：AKM函数

    1. 题目描述 /** 阿克曼(Ackmann)函数 [题目描述] 阿克曼(Ackmann)函数A(m,n)中,m,n定义域是非负整数(m<=3,n<=10),函数值定义为: akm(m, ...

  3. jQuery 源码分析(一) 代码结构

    jQuery是一个Javascript库,它支持链式操作方式,即对发生在同一个JQuery对象上的一组动作,可以直接接连写无需要重复获取对象.这一特点使得JQuery的代码无比优雅,而且有强大的选择器 ...

  4. react 练习参考

    项目地址:https://gitee.com/dhclly/icedog.react React 练习项目 相关资源链接 React官方 https://reactjs.org React 中国 ht ...

  5. Python中的passed by assignment与.NET中的passing by reference、passing by value

    Python文档中有一段话: Remember that arguments are passed by assignment in Python. Since assignment just cre ...

  6. css彩虹文字

    用CSS3实现彩虹文字的效果,只在Webkit内核的浏览器(谷歌浏览器或移动端)上有效果. background-image: -webkit-gradient(linear, left top, r ...

  7. nginx的6种负载均衡策略

    在服务器集群中,Nginx起到一个反向代理服务器的作用.为了避免单独一个服务器压力过大导致服务器奔溃,就需要将不同用户的请求转发给不同给不同的服务器,保证集群中的每一台服务器都能正常运作,这种机制就叫 ...

  8. A query was run and no Result Maps were found for the Mapped Statement

    mybatis测试方法报错: org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.exec ...

  9. 【译】.NET Core 是 .NET 的未来

    为什么要翻译咧,.NET 5 都宣布在 .NET Core 之后发布咯,何不再给 .NET Core 打打鸡血,我这个 .NET Core 的死忠粉. 原文:<.NET Core is the ...

  10. 解决Git 克隆代码 The remote end hung up unexpectedly错误

    从GitHub上克隆一个项目一直不成功!猜想可能是文件太大超时或者网络太慢超时! 解决方案: 配置 git config -- git config -- 增加最低速时间,but,还是不行! 公司网络 ...