如何使用localStorage

$(function() {

var search_btn = $("#search_btn");

var keyArr = [];

// 点击事件

search_btn.on("click", function() {

// 获取当前文本框里面的内容

var keyword = $(this).siblings("input").val();

// 去判断输入的文字是否合法 并且不能为空字符串

if (keyword && $.trim(keyword)) {

keyArr.push(keyword);

// 数字存进了数组的里面,现在转为字符串 存到localStorage里面去

localStorage.setItem("keyArr", JSON.stringify(keyArr))

location.href = "search-result.html?keyword=" + keyword;

} else {

alert("请输入要搜索的内容");

}

})

/*

    实现历史关键字存储

        1.准备一个存储关键字的数组

        2.当用户点击搜索按钮的时候 将用户输入的关键字追加到数组中

        3.将数组存储在本地存储中

        4.在页面一上来的时候 判断本地存储中是否有已经存储的关键字

        5.将数据和HTML拼接 将数据展示在页面中

*/

if (localStorage.getItem("keyArr")) {

keyArr = JSON.parse(localStorage.getItem("keyArr"));

var html = template("box", { result: keyArr });

$("#history-box").html(html);

 

}

/*

    实现清空历史

        1.给元素添加点击事件

        2.清空页面中的数据 清空本地存储中的数据

*/

$("#clearBtn").on("click", function() {

$("#history-box").html();

// localStorage.clear();

localStorage.removeItem("keyArr");

})

})