早期的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. ubuntu16.04matlab中文注释乱码的解决办法

    中文注释乱码的原因是windows下的m文件采用的是gb2312编码,只要将所有的m文件转成 utf8文件,显示就正常了. 1.首先安装enca:sudo apt-get install enca 2 ...

  2. asp.net mvc 系统操作日志设计

    第一步.系统登录日志 通过signalr来管理用户的登录情况,并保存用户的登录记录. 第二步 通过mvc过滤器,来横切路由访问记录. 保存方式:通过httpclient异步请求webapi 数据通过m ...

  3. 【转】UML之类图和对象图

    思路呈现 什么是类图? 描述类.接口.协作及他们之间的关系的图.显示系统中类的静态结构. 有什么作用? 描述软件系统的静态结构 ①对系统的词汇建模 ②对简单协作建模 ③对逻辑数据库模式建模 什么是对象 ...

  4. java程序 cpu占用过高分析

    linux终端下用 top命令看到cpu占用超过100%.之所以超过100%.说明cpu是多核.默认top显示的是cpu加起来的使用率,运行top后按大键盘1看看,可以显示每个cpu的使用率,top里 ...

  5. rapoo mt700键盘mac osx不能复制问题

    问题描述:rapoo mt700键盘mac osx,按windows建+c不能复制,其它按键正常 解决办法:检查右上角windows等是否亮,如果是亮着按FN+WIN 切换模式 操作方法: 有线模式: ...

  6. 获取主机信息,网络信息AIP,getsockname,getpeername,getservbyname,getservbyport,inet_ntop,inet_pton

    获取主机信息 1.ip地址转换,主机字节序 <---> 网络字节序 #include <arpa/inet.h> int inet_pton(int af, const cha ...

  7. 图片转PDF

    目的:图片转pdf(image2pdf)依赖:fpdf.php 网址 为 http://fpdf.org/ 有文档和包 demo:step 1 : First download fpdf librar ...

  8. [LeetCode#180]Consecutive Numbers

    Write a SQL query to find all numbers that appear at least three times consecutively. +----+-----+ | ...

  9. pyqt5学习

    详细设计追函数报告生成 界面大致如下: 部分UI代码: #!/usr/bin/env python3.7 # -*- coding:utf-8 -*- # Author: Lancer 2019-09 ...

  10. Python - 面向对象 - 第二十天

    Python 面向对象 Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的.本章节我们将详细介绍Python的面向对象编程. 如果你以前没有接触过 ...