做图的兼职网站大良营销网站建设方案
【08.webStorage--本地存储】
(1). 什么是 localStorage 和 sessionStorage ？
- 它们都是浏览器的一种本地存储数据的方式
- 它们只是存在本地，即浏览器中，不会发送到服务器
它们的区别：
- localStorage：永久存在浏览器中【不管是否关闭浏览器】，除非手动删除
- sessionStorage：当浏览器被关闭时，自动消失，存储的数据被清空
【localStorage】
1.特点：
- 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）。
- LocalStorage存储的内容，需要手动清除才会消失。
【需要手动清空缓存，不然就算关闭了浏览器，LocalStorage中存储的数据还在】
2.localStorage的4个API方法：
-
localStorage.setItem('key','value')- 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
<script>// 保存数据方法function saveData (){// 本地存储中，数据是以键值对【key--value】的形式存储的localStorage.setItem('伍六七', '理发师')localStorage.setItem("梅小姐", "刺客")localStorage.setItem('江主任', '小鸡岛妇联主席')// JSON.stringify(p):将p这个对象转换成json字符串的形式localStorage.setItem('天龙帮', JSON.stringify(p))} </script> -
localStorage.getItem('key')-
该方法接受一个键名作为参数，返回键名对应的值。
-
JSON.parse():把字符串解析成对象。
<script>// 读取数据方法function readData() {console.log(localStorage.getItem('江主任'))const readdata1 =localStorage.getItem('天龙帮')//读取到的是一个对象console.log(JSON.parse(readdata1))//读取到的是字符串console.log(localStorage.getItem('天龙帮'))} </script> -
-
localStorage.removeItem('key')- 该方法接受一个键名作为参数，并把该键名从存储中删除。
<script>// 删除数据的方法function deleteData() {localStorage.removeItem('伍六七')} </script> -
localStorage.clear()- 该方法会清空存储中的所有数据。
<script>// 清楚所有数据function clearAllData(){localStorage.clear()} </script>
【sessionStorage】
1.特点：
- 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）。
- SessionStorage存储的内容会随着**
浏览器窗口关闭而消失**。 - 【会话结束–关闭浏览器，数据就消失】：就是说，再次打开浏览器时，SessionStorage存储的内容会被清空。
2.sessionStorage的4个API方法：
-
sessionStorage.setItem('key','value')<script>// 保存数据方法function saveData (){// 本地存储中，数据是以键值对【key--value】的形式存储的sessionStorage.setItem('伍六七', '理发师')sessionStorage.setItem("梅小姐", "刺客")sessionStorage.setItem('江主任', '小鸡岛妇联主席')// JSON.stringify(p):将p这个对象转换成json字符串的形式sessionStorage.setItem('天龙帮', JSON.stringify(p))} </script> -
sessionStorage.getItem('key')<script>// 读取数据方法function readData() {console.log(sessionStorage.getItem('江主任'))const readdata1 =sessionStorage.getItem('天龙帮')//读取到的是一个对象console.log(JSON.parse(readdata1))//读取到的是字符串console.log(sessionStorage.getItem('天龙帮'))} </script> -
sessionStorage.removeItem('key')<script>// 删除数据的方法function deleteData() {sessionStorage.removeItem('伍六七')} </script> -
sessionStorage.clear()<script>// 清楚所有数据function clearAllData(){sessionStorage.clear()} </script>
总结：
- SessionStorage存储的内容会随着浏览器窗口关闭而消失。
- LocalStorage存储的内容，需要手动清除才会消失。
xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。JSON.parse(null)的结果依然是null。
【09.TodoList本地存储】
JavaScript 逻辑或【||】和 逻辑与【&&】
特点
||（逻辑或）：当两个操作数都为false时返回false，否则返回true。如果第一个操作数为true，则不会执行第二个操作数。&&（逻辑与）：当两个操作数都为true时返回true，否则返回false。如果第一个操作数为false，则不会执行第二个操作数。
App.vue文件中的变化：【TodoList案例里只有App.vue里的data(){}和监事属性watch:{}变了】
<script>export default {name:'App',components: { TodoHeader,TodoFooter,TodoList },data() {return {//由于todos是TodoHeader组件和TodoFooter组件都在使用，所以放在App中（状态提升）// todos：拿到的是一个字符串，需要解析成一个对象//【A||B】：第一个操作数A为true，则不会执行第二个操作B。第一个操作数A为false，则会执行第二个操作B。todos:JSON.parse(localStorage.getItem('todos')) || [],// todos为空时，解析出来的对象为null,即todos:null || [],// 举例：console.log(null || 3); //3}},// methods方法里的函数不变，保持一样methods: { },// 监视属性todoswatch: {todos:{// 深度监视开启deep:true,//handler什么时候调用？当todos属性发生改变时// newValue:该属性变化之后的值handler(newValue){// newValue：传过来是一个数组对象，需要通过JSON.stringify()转化成一个字符串存储在本地localStorage.setItem('todos',JSON.stringify(newValue))}}}}
</script>