早期的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. c# 第31节 构造函数与析构函数、new关键字作用

    本节内容: 1:构造和析构的简介 2:构造函数的定义和使用 3:new关键字的作用 4:析构函数的定义和使用 1:构造和析构的简介 2:构造函数的定义和使用 构造函数: 当实例化的一个对象,就默认执行 ...

  2. 20191028 牛客网CSP-S Round2019-1

    花了 \(30min\) 打了 \(180\) 分的暴力... 仓鼠的石子游戏 问题描述 链接:https://ac.nowcoder.com/acm/contest/1100/A 仓鼠和兔子被禁止玩 ...

  3. hibernate中flush()、refresh()、clear()缓存操作

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~分割线~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ flush():使数据库中的对象和session缓存中的对象的状态 ...

  4. 第09组 Beta版本演示

    组长博客 本组(组名)所有成员 短学号 姓名 2236 王耀鑫(组长) 2210 陈超颖 2209 陈湘怡 2228 许培荣 2204 滕佳 2205 何佳琳 2237 沈梓耀 2233 陈志荣 22 ...

  5. Serializable接口的意义和用法

    本人软件工程大三妹子一枚,以下为个人观点仅供参考: 最近在云课堂学习springmvc+mybatis项目时,发现老师在实体类中引用了serializable这个接口,如下:   import jav ...

  6. 快速认识springcloud微服务

    这周浅显的学习了springcloud.简单聊一下微服务.所谓的微服务远远没有我想想的那么高端难以理解,简单说,就是多个服务分布在不同的服务器上,由这些服务互相配合完成某一项任务.那服务和服务之间调用 ...

  7. idea修改svn地址

    1.不能直接修改idea中的svn路径 2.需要先修改小乌龟地址,先找到本地的项目文件右键

  8. SiftingAppender logback 动态 输出 日志 到指定日志文件

    SiftingAppender https://www.mkyong.com/logging/logback-different-log-file-for-each-thread/

  9. 阿里云 CDN 业务基于边缘容器的云原生转型实践

    导读:本文基于边缘容器的阿里云 CDN 云原生实践, 涵盖了边缘容器的背景和趋势,边缘托管集群 ACK Managed Edge K8s(文中简称“Edge@ACK”) 的能力.架构,以及基于边缘容器 ...

  10. sklearn 学习 第一篇：分类

    分类属于监督学习算法,是指根据已有的数据和标签(分类)进行学习,预测未知数据的标签.分类问题的目标是预测数据的类别标签(class label),可以把分类问题划分为二分类和多分类问题.二分类是指在两 ...