前端vue入门(纯代码)08

【08.webStorage--本地存储】

(1). 什么是 localStorage 和 sessionStorage ？

• 它们都是浏览器的一种本地存储数据的方式
• 它们只是存在本地，即浏览器中，不会发送到服务器

它们的区别：

• localStorage：永久存在浏览器中【不管是否关闭浏览器】，除非手动删除
• sessionStorage：当浏览器被关闭时，自动消失，存储的数据被清空

【localStorage】

1.特点：

1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）。
2. LocalStorage存储的内容，需要手动清除才会消失。
3. 【需要手动清空缓存，不然就算关闭了浏览器，LocalStorage中存储的数据还在】

2.localStorage的4个API方法：

1. 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>
   

2. 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>
   

3. localStorage.removeItem('key')

   • 该方法接受一个键名作为参数，并把该键名从存储中删除。

   <script>// 删除数据的方法function deleteData() {localStorage.removeItem('伍六七')}
   </script>
   

4. localStorage.clear()

   • 该方法会清空存储中的所有数据。

   <script>// 清楚所有数据function clearAllData(){localStorage.clear()}
   </script>
   

【sessionStorage】

1.特点：

1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）。
2. SessionStorage存储的内容会随着**浏览器窗口关闭而消失**。
3. 【会话结束–关闭浏览器，数据就消失】：就是说，再次打开浏览器时，SessionStorage存储的内容会被清空。

2.sessionStorage的4个API方法：

1. 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>
   

2. sessionStorage.getItem('key')

   <script>// 读取数据方法function readData() {console.log(sessionStorage.getItem('江主任'))const readdata1 =sessionStorage.getItem('天龙帮')//读取到的是一个对象console.log(JSON.parse(readdata1))//读取到的是字符串console.log(sessionStorage.getItem('天龙帮'))}
   </script>
   

3. sessionStorage.removeItem('key')

   <script>// 删除数据的方法function deleteData() {sessionStorage.removeItem('伍六七')}
   </script>
   

4. sessionStorage.clear()

   <script>// 清楚所有数据function clearAllData(){sessionStorage.clear()}
   </script>
   

总结：

1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
2. LocalStorage存储的内容，需要手动清除才会消失。
3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
4. 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>