欢迎访问响应式个人博客!
男生版
女生版
初遇时,她的微笑,她往日的深情、承诺和傻劲,两个人共度的美丽时刻,一一印在回忆里,今天的感情已经比不上从前,但是我爱着恋着往日的她,舍不得离开!
排行
详情
您当前的位置>首页 > 正文
HTML5本地存储之Web Storage篇
2016-03-29 10:20:00   来源:博主开发总结   评论:0 点击:

Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB。


Web Storage又分为两种:

  • sessionStorage
  • localStorage

从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了;而localStorage则一直将数据保存在客户端本地;

   localStorage.setItem('configData', JSON.stringify(trData)); //将数据保存到localStore
  localStorage.setItem('configTime', timeGrit); //将时间粒度保存到localStore

不管是sessionStorage,还是localStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):

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

如上,key和value都必须为字符串,换言之,web Storage的API只能操作字符串。

接下来,我们通过Web Storage开发一个简单的通讯录小程序,以演示相关API的使用方法;我们要实现如下功能:

 

  1. 录入联系人,联系人有姓名、手机号码2个字段,以手机号作为key存入localStorage;
  2. 根据手机号码,查找机主;
  3. 列出当前已保存的所有联系人信息;

首先,准备一个简单的HTML页面,如下:
 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5本地存储title>
head>
<style>
    .content{
        width: 800px;
        height: 310px;
        background: palegoldenrod;
        margin: 0 auto;

    }

style>
<body>
 <div class="content">
     <div class="box">
         <div class="name">姓名:<input type="text" id="person">div>
         <div class="phone">手机号:<input type="text" id="phone">div>
         <div class="sure" onclick="save()" >保存div>
     div>
     <div class="search">
         手机号查找:<input type="text" id="input">
         <div class="input" onclick="find()">点击查询div>
     div>
     <div id="list">div>
     <div id="result">
     div>
 div>

 <script>
     function save(){
           var phone = document.getElementById("phone").value;
           var person = document.getElementById("person").value;
           localStorage.setItem(phone,person);
           console.log(localStorage);
           loadAll()
         }
     function find(){
           var input = document.getElementById("input").value;
           var name = localStorage.getItem(input);
           var result = document.getElementById("result");
           result.innerHTML = input + "的机主是:" + name;
        }
     function loadAll(){
          var list = document.getElementById("list");
           if(localStorage.length>0){
                  var result = "";
                  result += "";
                  for(var i=0;i<localStorage.length;i++){
                       var mobilephone = localStorage.key(i);
                       var name = localStorage.getItem(mobilephone);
                        result += "";
                  }
                result += "
姓名 手机号码
"+name+" "+mobilephone+"
"; list.innerHTML = result; }else{ list.innerHTML = "没有该信息"; } } script> body> html>
 用法比较简单,希望能帮到大家
 版权声明:本文为博主原创文章,未经博主允许不得转载。

相关热词搜索:HTML5本地存储之Web Storage篇

上一篇:每个前端开发者都要理解网页
下一篇:Heatmap.js – 最强大的 Web 动态热图

收藏