前端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: {  },
    // 监视属性todos
    watch: {
      todos:{
        // 深度监视开启
        deep:true,
       //handler什么时候调用？当todos属性发生改变时
       // newValue:该属性变化之后的值
        handler(newValue){
          // newValue：传过来是一个数组对象，需要通过JSON.stringify()转化成一个字符串存储在本地
          localStorage.setItem('todos',JSON.stringify(newValue))
      }
      }
    }
  }
script>