html5清除缓存代码,html5本地缓存

首页

*{

margin: 0;

padding: 0;

}

body{

margin-left: 300px;

}

ul{

list-style: none;

}

ul li,div{

width: 250px;

padding: 10px 0;

margin-left: 10px;

border-bottom: 1px dashed #ccc;

height: 20px;

}

a{

float: right;

}

input{

padding: 5px;

margin: 10px;

}

清空搜索记录

• 没有搜索记录
• 手机删除
• 手机删除
• 手机删除
• 手机删除
• 手机删除

$(function () {

var historyListJson = localStorage.getItem('historyList') || '[]';

var historyListArr = JSON.parse(historyListJson);

/*获取到了数组格式的数据*/

var render = function () {

var html = '';

historyListArr.forEach(function (item,i) {

html += '

'+item+' 删除';

});

html = html || '

没有搜索记录';

$('ul').html(html);

}

render();

$('[type="button"]').on('click',function () {

var key = $.trim($('[type=search]').val());

if(!key){

alert('请输入搜索关键字');

return false;

}

/*追加一条历史*/

historyListArr.push(key);

/*保存*/

localStorage.setItem('historyList',JSON.stringify(historyListArr));

/*渲染一次*/

render();

$('[type=search]').val('');

});

/*3.点击删除的时候删除对应的历史记录渲染列表*/

$('ul').on('click','a',function () {

var index = $(this).data('index');

historyListArr.splice(index,1);

localStorage.setItem('historyList',JSON.stringify(historyListArr));

render();

});

/*4.点击清空的时候清空历史记录渲染列表*/

$('div a').on('click',function () {

historyListArr = [];

//localStorage.clear();

//localStorage.removeItem('historyList');

localStorage.setItem('historyList','');

render();

});

});