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在浏览器中的位置

点我查看完整的代码地址