一.webStorage 本地缓存
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样
的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。
HTML5中的存储 方式：
---1.window.sessionStorage 会话存储：
---2.window.localStorage 本地存储：
sessionStorage和localStorage的区别：
sessionStorage：
- 保存在内存中。
- 生命周期为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁。
- 在同一个窗口下数据可以共享。
localStorage：
- 有可能保存在浏览器内存里，有可能在硬盘里。
- 永久生效，除非手动删除（比如清理垃圾的时候）。
- 可以多窗口共享。
二.存储过程
----为localstorage添加数据，setItem(key,字符串格式的value)
----为localStorage获取数据，读取存储内容，getItem(–key–)
----goods—即key,需要自己手动添加，在自己本地浏览器中存储
----var historyJson=localStorage.getItem(“goods”) || “[]”;
----将字符串存储的数据转化为json格式----序列化 JSON。parse(“字符串”)
----var historyArr=JSON.parse(hisstoryJson)；
----var historyJson=localStorage.getItem("goods") || "[]";
----将字符串存储的数据转化为json格式----序列化 JSON。parse("字符串")
----var historyArr=JSON.parse(hisstoryJson)；
----存储数据
----var str="";
----historyArr.forEach(function(item,i){
str+="..."
})
----如果没有数据，给一个提示，，没有搜素内容
----str=str || "<li>没有搜索内容</li>"
----ul中创建内容
----$("ul").html(str);
----点击搜索，将新的历史记录重新渲染到页面中
----点击事件--
----获取文本框的内容
var txt=$.trim($('[type="search"]'))
----如果为空，则不执行
if(!txt){
alert("请输入关键字")；
return false；
}
----此时更新数组数据
historyArr.push(txt);
----为本地缓存添加数据，setItem(key,字符串格式的value)
localStorage。setItem("cloths",JSON.stringify(historyArr));
----重新渲染，即重新在页面上创建元素，通过遍历数组数据，将数组数据渲染，，html()方法
----清空所有数据
----localStorage。setItem("goods","[]");
----将数组清空
historyArr=[];
----然后进行遍历，将数据渲染到页面
三.案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.layout {
width: 300px;
margin: 20px auto;
}
input {
padding: 5px;
margin: 5px;
}
div {
overflow: hidden;
margin: 10px 0;
}
a {
float: right;
}
ul li {
list-style: none;
padding: 10px 0;
border-top: 1px dashed #ccc;
border-bottom: 1px dashed #ccc;
}
</style>
<script>
/*
* 本地缓存：webStorage ：①localStorage ②sessionStorage
* 两者的区别：
* 1. 存储空间大小： localStorage可以存储20M sessionStorage只能存储5M
* 2. 存储的位置：localStorage在客户端的浏览器中存储，必须通过手动清除缓存或者代码实现清除缓存 sessionStorage存储在页面中，当页面关闭，数据就清除了
*
* 面试题： 请描述localStorage、sessionStorage和cookie的区别：
*
*
* */
</script>
</head>
<body>
<div class="layout">
<input class="search" type="search" placeholder="请输入搜索内容">
<input class="btn" type="button" value="搜索">
<div>
<a href="javascript:;">清空搜索记录</a>
</div>
<ul>
<li>没有搜索内容</li>
<li><span>搜索内容1</span><a href="javascript:;">删除</a></li>
<li><span>搜索内容2</span><a href="javascript:;">删除</a></li>
<li><span>搜索内容3</span><a href="javascript:;">删除</a></li>
</ul>
</div>
<script src="jquery.min.js"></script>
<script>
/*
* //1.将本地缓存的数据 渲染到页面中去
* 1.1 获取本地缓存的数据 localStorage.getItem('key')----字符串类型
* 1.2 序列化数据： JSON.parse(字符串)----数组格式
* 1.3 渲染页面----遍历数组中的元素，创建DOM对象，添加页面中
*
* */
var historyStr = localStorage.getItem('goods');
var historyArr = JSON.parse(historyStr) || [];
function render() {
var html = '';
//forEach()-----数组的方法，遍历数组
historyArr.forEach(function (item, index) {
// console.log(item + '======' + index);
html += ' <li><span>' + item + '</span><a data-index="' + index + '" href="javascript:;">删除</a></li>'
});
//友好提示：没有搜索内容
html = html || ' <li>没有搜索内容</li>';
$('ul').html(html);
}
render();
/*
*
* 2. 点击搜索，将搜索的内容重新渲染到页面中
* 2.1 将搜索框的内容获取到（注意空格），
* 2.2 追加到数组中----先判断搜索框有没有内容
* 2.3 将数组的数据添加到本地缓存中 localStorage.setItem('key',字符串格式的数组)---反序列化将数组转换为字符串格式：JSON.stringify（）
* 2.4 将数组渲染到页面中
* 2.5 将文本框内容清空
*
* */
$('.btn').on('click', function () {
var value = $.trim($('.search').val());
if (!value) {
alert('请输入搜索内容！');
return false;
}
// 数组中的方法：四个方法：
// ①向后追加： push ②删除最后一个元素：pop
// ③ 向前追加：unshift ④删除第一个：shift
// ⑤ 删除元素： splice(索引，删除元素的个数，替换的元素1,2,3,。。。)
historyArr.push(value);
localStorage.setItem('goods', JSON.stringify(historyArr));
render();
$('.search').val('');
})
/*
* 3. 点击删除，删除这一行li
* 3.1 获取a标签的自定义的索引属性
* 3.2 删除数组中的li li的索引和a标签的索引一样
* 3.3 重新设置缓存数据 localStorage.setItem('key',字符串)
* 3.4 渲染页面
*
* */
$('ul').on('click', 'a', function () {
//谁执行事件，this指的就是谁
var i = $(this).data('index');
historyArr.splice(i, 1);
localStorage.setItem('goods', JSON.stringify(historyArr));
render();
});
/*
*
* 4. 点击清空所有，清空所有缓存数据
* 4.1 将缓存数据清空 localStorage.clear() removeItem('key') setItem('key','');
* 4.2 重新渲染页面-----注意：将数组清空
*
* */
$('div a').on('click', function () {
// localStorage.clear();
localStorage.removeItem('goods');
historyArr = [];
render();
})
</script>
</body>
</html>
1581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
