早期的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. 攻防世界web之ics-05

    本文借鉴以下两篇文章的指导 https://www.jianshu.com/p/5a502873635b https://blog.csdn.net/about23/article/details/9 ...

  2. [C2W2] Improving Deep Neural Networks : Optimization algorithms

    第二周:优化算法(Optimization algorithms) Mini-batch 梯度下降(Mini-batch gradient descent) 本周将学习优化算法,这能让你的神经网络运行 ...

  3. lua 11 闭包，函数的使用

    转自:http://book.luaer.cn/_41.htm 当一个函数内部嵌套另一个函数定义时,内部的函数体可以访问外部的函数的局部变量,这种特征我们称作词法定界.虽然这看起来很清楚,事实并非如此 ...

  4. python27期尚哥讲TCP：

    TCP:传输控制协议(使用情况多于udp) 稳定:保证数据一定能收到 相对UDP会慢一点 web服务器一般都使用TCP(银行转账,稳定比快要重要)TCP通信模型: 在通信之前,必须先等待建立链接 TC ...

  5. 洛谷 P4316 绿豆蛙的归宿

    洛谷 P4316 绿豆蛙的归宿 洛谷传送门 题目背景 随着新版百度空间的上线,Blog宠物绿豆蛙完成了它的使命,去寻找它新的归宿. 题目描述 给出一个有向无环图,起点为1终点为N,每条边都有一个长度, ...

  6. luoguP4248 [AHOI2013]差异

    题意 考虑式子前面那段其实是\((n-1)*\frac{n*(n+1)}{2}\),因为每个后缀出现了\(n-1\)次,后缀总长为\(\frac{n*(n+1)}{2}\). 现在考虑后面怎么求: \ ...

  7. 为什么用时序电路实现CPU

    时序电路 我们带着如下疑问来看时序电路: 1.为什么CPU要用时序电路,时序电路与普通逻辑电路有什么区别. 2.触发器.锁存器以及时钟脉冲对时序电路的作用是什么,它们是如何工作的. 带着这两个问题,我 ...

  8. goroutine使用

    Goroutine是建立在线程之上的轻量级的抽象.它允许我们以非常低的代价在同一个地址空间中并行地执行多个函数或者方法.相比于线程,它的创建和销毁的代价要小很多,并且它的调度是独立于线程的.在gola ...

  9. 基于Django的Rest Framework框架的频率组件

    0|1一.频率组件的作用 在我们平常浏览网站的时候会发现,一个功能你点击很多次后,系统会让你休息会在点击,这其实就是频率控制,主要作用是限制你在一定时间内提交请求的次数,减少服务器的压力. modle ...

  10. 【shell脚本】自动监控tomcat服务===autoCheck.sh

    自动监控tomcat服务,当tommcat服务挂掉时自动重启 一.脚本内容 [root@localhost ]# cat /root/autoCheck.sh #!/bin/bash startTom ...