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. ural 1100. Final Standings（数据结构）

    1100. Final Standings Time limit: 1.0 secondMemory limit: 16 MB Old contest software uses bubble sor ...

  2. js 冒泡排序

    var arr = []; for(var i=0; i<100000; i++){ arr.push(parseInt(Math.random()*100)) }; var t1 = Date ...

  3. Windows Search Service

    Windows Search Service是一个全方位的托管云服务,可以允许开发者通过.Net SDK或者REST API多种多样的搜索服务. 如果你想开发一个搜索服务,那么你的服务应该包含以下组件 ...

  4. Masonry的一些等间距布局

    控件之间的间距相等,但是控件的宽度是不定的. 下列的代码:定义间距为10,yellowview的宽度是由redView的宽度计算出来的. UIView *redView = [[UIView allo ...

  5. Kinetis学习笔记（一）——基于KSDK 2.0

  6. STL容器小结

     1.空间分配器 std::alloc用于容器中内存空间的分配和释放,以及分配内存的管理.construct().destroy()等全局函数用于为对象的构造和析构. 2.迭代器和trains 迭代器 ...

  7. linux: 几个常用makefile模板

    不才,总结个人常用makefile模板,以备后用. 1.编译动态库 ############################################################# # Ma ...

  8. 《学习的艺术》 (The Art of Learning)

    这是我本科期间读过的的一本,个人感觉很有价值的书.当时刚刚失恋,正在思考人生,看这本书的时候,收获很多. 划小圈 (Making Smaller Circles)

  9. 《JavaScript高级程序设计》读书笔记 ---小结

    对象在JavaScript 中被称为引用类型的值,而且有一些内置的引用类型可以用来创建特定的对象,现简要总结如下: 引用类型与传统面向对象程序设计中的类相似,但实现不同: Object 是一个基础 ...

  10. 自动安装Redis服务端与PHP扩展Redis

    该脚本基于阿里云服务器安装脚本,并只能运用于centos / aliyun os,该脚本使用时,需要与阿里云安装脚本的install.sh放在同一目录下.有缘人切忌乱用: #! /bin/bash # ...