HTML5存储

HTML5 web存储，一个比cookie更好的本地存储方式。

什么是HTML5 Web存储？

使用HTML5可以在本地存储用户的浏览数据。

早些时候，本地存储使用的是cookie.但是Web存储更加的安全与快速。这些数据不会被保存在服务器上，它可以存储大量的数据，而不影响网站的性能。

浏览器支持

IE8+,firefow,Opera,Chrome和Safari

localStorage和sessionstorage

客户端存储数据的两个对象为：

localStorage-没有时间先升值的数据存储。

sessionStorage-针对一个session的数据存储。

if(typeof(Storage)!=="undefined") {

// 是的! 支持 localStorage sessionStorage 对象! // 一些代码.....

} else {

// 抱歉! 不支持 web 存储。

}

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

  • 保存数据：localStorage.setItem(key,value);
  • 读取数据：localStorage.getItem(key);
  • 删除单个数据：localStorage.removeItem(key);
  • 删除所有数据：localStorage.clear();
  • 得到某个索引的key：localStorage.key(index);

Web Storage开发一个简单的网站列表程序

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>HTML5本地存储之Web Storage篇</title>  
</head>  
<body>  
    <div style="border: 2px dashed #ccc;width:320px;text-align:center;">     
        <label for="sitename">网站名(key)：</label>  
        <input type="text" id="sitename" name="sitename" class="text"/>  
        <br/>  
        <label for="siteurl">网 址(value)：</label>  
        <input type="text" id="siteurl" name="siteurl"/>  
        <br/>  
        <input type="button" onclick="save()" value="新增记录"/>  
        <hr/>  
        <label for="search_phone">输入网站名：</label>  
        <input type="text" id="search_site" name="search_site"/>  
        <input type="button" onclick="find()" value="查找网站"/>  
        <p id="find_result"><br/></p>  
    </div>  
    <br/>  
    <div id="list">  
    </div>  
    <script>
    // 载入所有存储在localStorage的数据
    loadAll();     
        
    //保存数据  
    function save(){  
        var siteurl = document.getElementById("siteurl").value;  
        var sitename = document.getElementById("sitename").value;  
        localStorage.setItem(sitename, siteurl);
        alert("添加成功");
    }
    //查找数据  
    function find(){  
        var search_site = document.getElementById("search_site").value;  
        var sitename = localStorage.getItem(search_site);  
        var find_result = document.getElementById("find_result");  
        find_result.innerHTML = search_site + "的网址是：" + sitename;  
    }
    //将所有存储在localStorage中的对象提取出来，并展现到界面上
    function loadAll(){  
        var list = document.getElementById("list");  
        if(localStorage.length>0){  
            var result = "<table border='1'>";  
            result += "<tr><td>网站名</td><td>网址</td></tr>";  
            for(var i=0;i<localStorage.length;i++){  
                var sitename = localStorage.key(i);  
                var siteurl = localStorage.getItem(sitename);  
                result += "<tr><td>"+sitename+"</td><td>"+siteurl+"</td></tr>";  
            }  
            result += "</table>";  
            list.innerHTML = result;  
        }else{  
            list.innerHTML = "数据为空……";  
        }  
    }      
    </script>
</body>  
</html>

html_web存储的更多相关文章

  1. 基于本地存储的kvm虚拟机在线迁移

    基于本地存储的kvm虚拟机在线迁移 kvm虚拟机迁移分为4种(1)热迁移基于共享存储(2)热迁移基于本地存储(3)冷迁移基于共享存储(4)冷迁移基于本地存储 这里介绍的是基于本地存储的热迁移 动态块迁 ...

  2. HTML5 sessionStorage会话存储

    sessionStorage 是HTML5新增的一个会话存储对象,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据.本篇主要介绍 sessionStorage(会话存储) ...

  3. HTML5 localStorage本地存储

    介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...

  4. MySQL数据库和InnoDB存储引擎文件

    参数文件 当MySQL示例启动时,数据库会先去读一个配置参数文件,用来寻找数据库的各种文件所在位置以及指定某些初始化参数,这些参数通常定义了某种内存结构有多大等.在默认情况下,MySQL实例会按照一定 ...

  5. Android数据存储之Android 6.0运行时权限下文件存储的思考

    前言: 在我们做App开发的过程中基本上都会用到文件存储,所以文件存储对于我们来说是相当熟悉了,不过自从Android 6.0发布之后,基于运行时权限机制访问外置sdcard是需要动态申请权限,所以以 ...

  6. nginx+iis+redis+Task.MainForm构建分布式架构 之 (redis存储分布式共享的session及共享session运作流程)

    本次要分享的是利用windows+nginx+iis+redis+Task.MainForm组建分布式架构,上一篇分享文章制作是在windows上使用的nginx,一般正式发布的时候是在linux来配 ...

  7. nodejs项目mysql使用sequelize支持存储emoji

    nodejs项目mysql使用sequelize支持存储emoji 本篇主要记录nodejs项目阿里云mysql如何支持存储emoji表情. 因由 最近项目遇到用户在文本输入emoji进行存储的时候导 ...

  8. html5的web存储

    在html5标准之前,web存储信息需要cookie来完成,但是cookie不适合大量数据存储.因为需要等待服务器响应,所以速度慢/效率低. 本地存储的特点: localstorage是仅存储在用户的 ...

  9. Mysql存储引擎及选择方法

    0x00 Mysql数据库常用存储引擎 Mysql数据库是一款开源的数据库,支持多种存储引擎的选择,比如目前最常用的存储引擎有:MyISAM,InnoDB,Memory等. MyISAM存储引擎 My ...

随机推荐

  1. As input tri-stated

    前些日子正好看到了riple兄的<一波三折--危险的"未分配"引脚>一文,颇受启发.正好最近也遇上了类似的问题,也可谓一波三折,还好最后摆平了,要不煮熟的鸭子可就要飞了 ...

  2. kubernetes port nodePort targetPort 理解

    port The port that the service is exposed on the service's cluster ip (virsual ip). Port is the serv ...

  3. Android5.1源码Xposed框架编译

    介绍 Xposed框架是一款可以在不修改APK的情况下影响程序运行(修改系统)的框架服务,基于它可以制作出许多功能强大的模块,且在功能不冲突的情况下同时运作 . 对于Android5.1系统,官方提供 ...

  4. Paxos算法简单介绍

    一种基于消息传递且具有高度容错特性的一致性算法.解决在存在宕机或者网络异常的集群中对某个数据的值达成一致性,并且保证无论在发生以上任何异常都不会破坏整个系统的一致性,具有容错性. Paxos算法实现的 ...

  5. ubuntu 14.04 opencv2.4.13 安装

    1.下载然后解压安装压缩包 unzip opencv-2.4.13.zip 2. 进入刚解压的文件夹,建立release文件夹 cd opencv-2.4.13 mkdir release 3. 安装 ...

  6. iframe自适应高度计算，iframe自适应

    计算页面的实际高度,iframe自适应会用到 IfrHeight: function (iframeId, callback) { var height; function calcPageHeigh ...

  7. JS 阻止整个网页的内容被选中

    pretty-girl { -webkit-user-select: none; } 可是!可是!不是每个浏览器都可以不忧桑!!!那就只能请脚本大王出山了. 阻止选中 有时候,我们需要禁止用户选中一些 ...

  8. 用setTimeout实现与setInteval类似的功能

    用setTimeout实现与setInteval类似的功能,代码如下: (function(){ var self = arguments.callee; //获取函数本身 count++; if ( ...

  9. 《JS权威指南学习总结--8.4 作为值的函数》

    内容要点:   函数可以定义,也可以调用,这是函数最重要的特性.函数定义和调用是JS的词法特性,对于其他大多数编程语言来说也是如此.然而在JS中,函数不仅仅是一种语法,也是值,也就是说,可以将函数赋值 ...

  10. HDU1009FatMouse' Trade(贪心)

    Problem Description FatMouse prepared M pounds of cat food, ready to trade with the cats guarding th ...