HTML5 Web存储之localStorage

HTML5 Web存储之localStorage

背景

以前，网页一般都是通过cookie在本地存储数据，但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

特点

没有时间限制

浏览器支持

常用API

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

tips: 键/值对通常以字符串存储!

示例

需求清单

• 对一个任务列表执行 CRUD 操作
• 原型图如下：
  

功能实现

1. 搭界面

<div id="container">
    <div id="top">
        <button id="btnInsert" onclick="btnInsertClick()">INSERT</button>
        <button id="btnSelect" onclick="btnSelectClick()">SELECT</button>
        <button id="btnDeleteAll" style="color: red;">CLEAR</button>
    </div>
    <div id="middle">
        <span>编号：</span><input type="text" id="txtID" placeholder="请输入任务编号"/>
        </br></br>
        <span>名称：</span><input type="text" id="txtName" placeholder="请输入任务名称"/>
    </div>
    <div id=bottom>
        <div id="status" name="status">状态信息</div>
        <table id="tbTaskList">
            <caption style="line-height: 50px; color: #000; font-weight: bold; font-size: 20;">任务列表</caption>
            <tbody id="tbBody"></tbody>
        </table>
    </div>
</div>

2. 导入jQuery库（目的：练习使用jQuery）

<script type="text/javascript" src="jquery-1.11.3.min.js"></script>

3. 准备工作

• 判断浏览器是否支持 localStorage

  isLocalStorageNameSupported = function() {
      var testKey = 'test', storage = window.localStorage;
      try {
          storage.setItem(testKey, '1');
          // storage.removeItem(testKey);
          return true;
      } catch (error) {
          return false;
      }
  }

• 判断对象是否为空

  function isNull(obj){
      return obj == null || obj == undefined || obj.length <= 0;
  }

• Person 类

  function Person(id, name, age){
      this.id = id;
      this.name = name;
      this.age = age;
  }

4. 初始化（绑定事件）

$(function(){
    // 尝试读取数据列表
    showListData();
    // 绑定事件
    bindEvents();
    // 编号文本框获取焦点
    $("#txtID").focus();
});

// 按钮点击事件
function btnInsertClick(){
    console.log("btnInsertClick");
    // 获取 id 和 name
    var task = new Object;
    var id = document.getElementById("txtID").value;
    var name = document.getElementById("txtName").value;
    task.id = id;
    task.name = name;
    task.isDelete = false;
    // 插入数据
    if (isNull(id) || isNull(name)) { 
        console.log("id 或 name 为空！");
        alert("id 或 name 为空！"); 
        return; 
    }
    insert(task);
}
function btnSelectClick(){
    console.log("btnSelectClick");
    showListData();
}

function btnDeleteClick(sender){
    var id = sender.value;
    console.log("btnDeleteClick id= " + id);
    // remove(id);
    _delete(id);
}

// jQuary绑定事件
function bindEvents(){
    $("#btnDeleteAll").click(function(){
        console.log("btnDeleteAllClick");
        var password = prompt("请输入口令", "");
        if("sa" == password){
            if(confirm("确定要清空所有数据吗？")){
                console.log("确定");
                remove(-1);
            } else {
                console.log("取消");
            }
        } else if(password == null || password == undefined){
            console.log("用户点击了'取消'按钮，do nothing");
        } else {
            alert("口令输入错误，系统即将锁定！！！" + password);
        }
    });
}

5. INSERT

function insert(task){
    if ( isLocalStorageNameSupported() ) {
        // can use localStorage.setItem('item','value')
        var str = JSON.stringify(task); // 将对象转换为字符串【只能存储字符串】
        localStorage.setItem(task.id, str);
        // 刷新列表
        showListData();
    } else {
        // can't use localStorage.setItem('item','value')
        alert("can't use localStorage.setItem('item','value')");
    }
}

6. DELETE

// 真正地删除：将数据从本地删除
function remove(id){
    // 清空数据
    if(id == -1) {
        // 全部删除
        localStorage.clear();
    } else {
        // 删除一条记录
        localStorage.removeItem(id);
    }
    // 刷新列表
    showListData();
}
// 软删除：只是改变当前删除对象的状态（task.isDelete = true;）
function _delete(id){
    // 根据id查找对象
    var str = localStorage.getItem(id);
    var task = JSON.parse(str);
    // 修改isDelete属性
    task.isDelete = true;
    // 保存对象
    str = JSON.stringify(task);
    localStorage.setItem(id, str);
    // 刷新列表
    showListData();
}

7. SELECT

// 展示列表数据
function showListData(){
    var t = document.getElementById("tbBody");
    console.log("删除前，数据数量：" + t.rows.length);
    console.log("$ = " + $);
    $("#tbBody").empty();
    $("#tbBody").append(createTitleRow());
    var objList = new Array();
    var count = localStorage.length;
    if(count>0){
        for (var i = 0; i < count; i++) {
            var keyName = localStorage.key(i);
            var str = localStorage.getItem(keyName);
            var task = JSON.parse(str);
            if(task != null && task != undefined && task.isDelete == false){
                objList[objList.length] = task;
            }
        }
    }
    if(objList.length > 0){
        for (var i = 0; i < objList.length; i++) {
            var task = objList[i];
            var rowStr = createTr(task);
             console.log("rowStr: " + rowStr);
             $("#tbBody").append(rowStr);
        }
    }
}

localStorage在浏览器中的位置

点我查看完整的代码地址