首页 > 其他分享 >33-Vue脚手架-浏览器本地存储(使用本地存储优化Todo-List案例)

33-Vue脚手架-浏览器本地存储(使用本地存储优化Todo-List案例)

时间:2023-10-30 12:00:37浏览次数:38  
标签:存储 Vue sessionStorage JSON localStorage 本地 todo todos

什么是网络存储 在HTML5之前,开发人员一般是通过使用Cookie在客户端保存一些简单的信息的。 在HTML5发布后,提供了一种新的客户端本地保存数据的方法,那就是Web Storage,存储内容大小一般支持5MB左右(不同浏览器可能还不一样),它允许 Web 应用程序在用户浏览器中实现本地存储机制,两种最常见的 Web 存储形式是 LocalStorage 和 Session Storage。 1) LocalStorage localStorage的生命周期是永久,存储在其中的数据永远不会离开浏览器,并且会一直保留在那里,直到您明确将其删除 2)Session Storage sessionStorage的生命周期为当前窗口或标签页,一旦窗口或标签页被关闭了,那么存储在其中的数据就会被删除   相关API(localStorage 和 sessionStorage 的接口基本一致) 1)xxxxStorage.setItem("key","value") 该方法接收一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值 2)xxxxStorage.getItem("key") 该方法接收一个键名作为参数,返回键名对应的值 3)xxxxStorage.remove("key") 该方法接收一个键名作为参数,并把该键名从存储中删除 4)xxxxStorage.clear() 该方法会清空存储中的所有数据   备注: 1)LocalStorage存储的内容,需要手动存储才会消失 2)SessionStorage存储的内容,会随着浏览器窗口关闭而消失 3)xxxxStorage.getItem(xxx),如果xxx对应的value获取不到,那么getItem的返回值是Null 4)JSON.parse(null) 的结果依然是 Null   扩展: JSON.parse() 方法用来解析 JSON 字符串 JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串

let p = {name:"马铃薯", age:26}

// JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串
const person = JSON.stringify(p)
console.log("@@",person)

// JSON.parse() 方法用来解析 JSON 字符串
console.log("@@",JSON.parse(person))

 

通过 唯品会 官网的历史搜索记录,来简单理解一下,本地存储LocalStorage,通过以键值对的形式保存数据【Key:searchHistoryData】 【Value:"数码相机"】

 

 

使用LocalStroage的小案例,这里直接使用JavaScript编写(localStorage的生命周期是永久,重新打开浏览器数据仍然存在)

localStroage.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>localStorage</title>
    </head>
    <body>
        <h2>localStorage</h2>
        <button onclick="saveData()">点击保存数据</button>
        <button onclick="showData()">点击获取数据</button>
        <button onclick="deleteData()">点击删除一条数据</button>
        <button onclick="deleteAllData()">点击删除所有数据</button>

        <script type="text/javascript">

            let p = {name:"马铃薯", age:26}

            function saveData(){
                // 将value存储到key字段
                localStorage.setItem("msg","hello")
                localStorage.setItem("msg2",888) // 这里保存的时候,会将整型类型转换为字符类型
                // JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串
                localStorage.setItem("person",JSON.stringify(p))
            }
            function showData(){
                console.log("获取localStorage中 'msg' 本地存储的值:" , localStorage.getItem("msg"))
                console.log("获取localStorage中 'msg2' 本地存储的值:" , localStorage.getItem("msg2"))

                const person = localStorage.getItem("person")
                // JSON.parse() 方法用来解析 JSON 字符串
                console.log("获取localStorage中 'person 本地存储的值:" , JSON.parse(person))
            }
            function deleteData(){
                localStorage.removeItem("msg2")
                console.log("localStorage中 'msg2' 已删除...")
            }
            function deleteAllData(){
                localStorage.clear()
                console.log("localStorage中 已清空 所有数据...")
            }
        </script>

    </body>
</html>

 

 

同理,使用SessionStroage的小案例,相关API接口都是一样的(sessionStorage的生命周期为当前窗口或标签页,重新打开浏览器数据则不存在)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>sessionStorage</title>
    </head>
    <body>
        <h2>sessionStorage</h2>
        <button onclick="saveData()">点击保存数据</button>
        <button onclick="showData()">点击获取数据</button>
        <button onclick="deleteData()">点击删除一条数据</button>
        <button onclick="deleteAllData()">点击删除所有数据</button>
        
        <script type="text/javascript">
        
            let p = {name:"马铃薯", age:26}
        
            function saveData(){
                // 将value存储到key字段
                sessionStorage.setItem("msg","hello")
                sessionStorage.setItem("msg2",888) // 这里保存的时候,会将整型类型转换为字符类型
                // JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串
                sessionStorage.setItem("person",JSON.stringify(p))
            }
            function showData(){
                console.log("获取sessionStorage中 'msg' 本地存储的值:" , sessionStorage.getItem("msg"))
                console.log("获取sessionStorage中 'msg2' 本地存储的值:" , sessionStorage.getItem("msg2"))
        
                const person = sessionStorage.getItem("person")
                // JSON.parse() 方法用来解析 JSON 字符串
                console.log("获取sessionStorage中 'person 本地存储的值:" , JSON.parse(person))
            }
            function deleteData(){
                sessionStorage.removeItem("msg2")
                console.log("sessionStorage中 'msg2' 已删除...")
            }
            function deleteAllData(){
                sessionStorage.clear()
                console.log("sessionStorage中 已清空 所有数据...")
            }
        </script>
        
    </body>
</html>

 

使用本地存储优化Todo-List案例

src/App.vue(主要修改的是这个部分,通过监视属性todos实现localStorage本地存储,在data中将localStorage数据读取到todos属性中)

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <!--动态绑定函数,在父组件定义一个函数,子组件调用该函数,父组件就可以收到子组件传过来的参数 :addTodo="addTodo"-->
        <UserHeader :addTodo="addTodo"></UserHeader>

        <UserList
            :todos="todos"
            :checkTodo="checkTodo"
            :deleteTodo="deleteTodo"
        ></UserList>

        <UserFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"></UserFooter>

      </div>
    </div>
  </div>
</template>

<script>
import UserHeader from "./components/UserHeader.vue";
import UserList from "./components/UserList.vue";
import UserFooter from "./components/UserFooter.vue";

export default {
  name: "App",
  components: {
    UserHeader,
    UserList,
    UserFooter,
  },
  data() {
    return {
      // todos: [
      //   { id: "001", title: "起床", done: true },
      //   { id: "002", title: "洗漱", done: false },
      //   { id: "003", title: "睡觉", done: true },
      // ],

      // 这里,将 todos 数据读取 localStorage 本地存储;如果初始化数据为空返回null时,则赋值一个空数组
      // JSON.parse() 方法用来解析 JSON 字符串

      // 在json中,||逻辑运算符
      // 1.只要 || 前面为 false,不管 || 后面是 true 还是 false,都返回 || 后面的值。
      // 2.只要 || 前面为 true,不管 || 后面是 true 还是 false,都返回 || 前面的值。
      todos:JSON.parse(localStorage.getItem("todos")) || []
    };
  },

  // 使用监视属性,通过监视todos属性,实现 localStorage 本地存储 todos 数据
  watch:{
    todos:{
      // 深度监视,监视对象内部值的改变
      deep:true,

      handler(newValue){
        // JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串
        console.log("@@监视属性",JSON.stringify(newValue))
        localStorage.setItem("todos",JSON.stringify(newValue))
      }
    }

  },

  methods: {
    // 添加一个todo
    addTodo(todoObj) {
      console.log("我是APP组件,我收到了数据:",todoObj)
      // unshift() 在数组头部添加元素
      this.todos.unshift(todoObj);
    },
    // 勾选or取消勾选一个todo
    checkTodo(id) {
      // forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数
      this.todos.forEach((todo) => {
        // 将tudo的done属性进行取反
        if (todo.id === id) todo.done = !todo.done;
      });
    },
    // 删除一个
    deleteTodo(id) {
      // 数组.filter() 实现数组的过滤,创建一个新数组, 其包含通过所提供函数实现的测试的所有元素
      // 过滤出,todo.id 不是 id 的数据
      this.todos = this.todos.filter((todo) => todo.id !== id);
    },
    // 全选or全不选
    checkAllTodo(done) {
      // forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数
      this.todos.forEach((todo) => {
        todo.done = done;
      });
    },
    //清除所有已经完成的任务
    clearAllTodo() {
     if(confirm("确认删除所有已完成的任务吗")){
       // 数组.filter() 实现数组的过滤,创建一个新数组, 其包含通过所提供函数实现的测试的所有元素
       // 过滤出,todo.done 还没完成 的数据
       // this.todos = this.todos.filter((todo) => todo.done == false);
       this.todos = this.todos.filter((todo) => !todo.done);
     }
    },
  },
};
</script>

<style>
/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
  0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>

 

 

标签:存储,Vue,sessionStorage,JSON,localStorage,本地,todo,todos
From: https://www.cnblogs.com/REN-Murphy/p/17797296.html

相关文章

  • Vue插槽
       插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot>表示,父组件可以在这个占位符中填充任何模板代码,如HTML、组件等,填充的内容会替换子组件的<slot></slot>标签。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制插槽的应用......
  • laravel:多图片上传(10.27.0/前端vue)
    一,相关文档https://learnku.com/docs/laravel/10.x/filesystem/14865#481e03二,前端vue代码123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657......
  • laravel:单图片上传(10.27.0/前端vue)
    一,相关文档https://learnku.com/docs/laravel/10.x/filesystem/14865#481e03二,前端vue代码123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657......
  • MySQL技术内幕InnoDB存储引擎学习笔记
    1、MYSQL体系结构: 2、INNODB存储引擎:支持事务,其设计目的主要是面向在线事务处理的应用。特点:行锁设计,支持外键,并支持类似oracle的非锁定读,同时设计用来最有效的利用使用内存和CPU;5.5.8开始默认使用innodb存储引擎使用多版本并发控制来获得高并发性,并实现了sql的4种隔离级......
  • Vuex状态管理常见的几种使用功能场景
    Vuex是一个专为Vue.js应用程序开发的状态管理模式。用于集中管理应用程序的所有组件之间共享的状态,确保状态的一致性和可预测性。使用Vuex的一般步骤如下:1:安装Vuex:使用npm或yarn安装Vuex库。npminstallvuex2:创建VuexStore:在Vue应用程序中创建一个Vuex的store实例,包含了应用程序......
  • 在Docker容器内,我如何连接到机器的本地主机?
    内容来自DOChttps://q.houxu6.top/?s=在Docker容器内,我如何连接到机器的本地主机?我有一个运行在Docker容器内的Nginx。我的主机系统上运行着一个MySql。我想从我的容器内连接到MySql。MySql只绑定到本地主机设备。有没有办法从这个Docker容器内连接到这个MySql或其他在本地......
  • vue的性能优化
    1、v-if和v-show却别场景使用2、computed和watch区别场景使用3、v-for循环需要添加key,并且v-for不能和v-if同时使用4、文件懒加载5、路由懒加载6、第三方插件的按需加载7、事件销毁,计时器销毁(如果有)......
  • MinIO 高性能分布式存储最新版单机与分布式部署
    目录一、概述二、单机部署(单主机,多硬盘模式)1)磁盘初始化2)创建服务启动用户并设置磁盘属主3)下载minio安装包4)修改配置5)配置systemctl启动6)客户端工具mc三、分布式集群部署(多主机、多硬盘模式)1)磁盘初始化2)创建服务启动用户并设置磁盘属主3)下载minio安装包4)修改配置5)配置syste......
  • 基于Vue2+elementUI的二手书管理系统-计算机毕业设计源码+LW文档
    摘 要本设计完成了基于Vue2+elementUI的二手书管理系统的设计与实现。现代移动化网络发展下,不同于以往的短信、邮件、收音机传递信息,网页是向用户传输信息的主要媒介之一。书籍也是向人们传递信息和知识的媒介,如今书籍印刷和出版的快速发展,以及社会文化水平的进步,越来越多的读书......
  • 如何将Redis注册为本地服务
    1.安装Redis1)下载Redis下载地址:https://github.com/microsoftarchive/redis/releases/download/win-3.2.100/Redis-x64-3.2.100.zip2)解压安装,将Redis-x64-3.2.100.zip解压到某个地址(这里解压到英文目录下)3)启动Redis:打开一个cmd窗口,使用cd命令切换到上边的解压目录,运行如下......