浏览器本地储存

最新推荐文章于 2024-07-10 11:07:14 发布

qq_26326471

最新推荐文章于 2024-07-10 11:07:14 发布

阅读量37

点赞数

分类专栏：学习文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_26326471/article/details/127600793

版权

学习专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage</title>
</head>
<body>
    <h2>localStorage</h2>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
    <button onclick="deleteAllData()">点我清空</button>
    <script>
        let p = {name:'张三',age:18}
        console.log(p.toString())
        function saveData () {
            localStorage.setItem('msg','hello!')
            localStorage.setItem('msg2',666)
            localStorage.setItem('person',JSON.stringify(p)) // 把一个对象变成字符串形式，并且能体现出内容
        }
        function readData () {
            console.log(localStorage.getItem('msg2'))
            console.log(localStorage.getItem('msg'))
            const result = localStorage.getItem('person')
            console.log(JSON.parse(result))
            
        }
        function deleteData () {
            localStorage.removeItem('msg2')
            
        }
        function deleteAllData () {
            localStorage.clear()
            
        }
    </script>
</body>
</html>

-----------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sessionStorage</title>
</head>
<body>
    <h2>sessionStorage</h2>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="deleteData()">点我删除一个数据</button>
    <button onclick="deleteAllData()">点我清空</button>
    <script>
        let p = {name:'张三',age:18}
        console.log(p.toString())
        function saveData () {
            sessionStorage.setItem('msg','hello!')
            sessionStorage.setItem('msg2',666)
            sessionStorage.setItem('person',JSON.stringify(p)) // 把一个对象变成字符串形式，并且能体现出内容
        }
        function readData () {
            console.log(sessionStorage.getItem('msg2'))
            console.log(sessionStorage.getItem('msg'))
            const result = sessionStorage.getItem('person')
            console.log(JSON.parse(result))
            
        }
        function deleteData () {
            sessionStorage.removeItem('msg2')
                             
        }
        function deleteAllData () {
            sessionStorage.clear()
            
        }
    </script>
</body>
</html>



--------------------------------------------------------------------------------------

  <template>
    <div id="root">
      <div class="todo-container">
        <div class="todo-wrap">
          <MyHeader
          :receive="receive"
          />
          <MyList
          v-bind:todos="todos"
          v-bind:checkTodo="checkTodo"
          v-bind:deleteTodo="deleteTodo"
          />
          <MyFooter
          v-bind:todos="todos"
          v-bind:checkAllTodo="checkAllTodo"
          :clearAllTodo="clearAllTodo"
          ></MyFooter>
        </div>
      </div>
    </div>

    
  </template>
  
  <script>
  // 引入school组件
import MyHeader from './components/MyHeader.vue'
import MyList from './components/MyList.vue'
import MyFooter from './components/MyFooter.vue'

  export default {
    name: 'App',
    components: {
      MyHeader,
      MyList,
      MyFooter,
    },
    data() {
        return {                           // 前项为真的话，能用就用， 不能用就用空数组
            todos:JSON.parse(localStorage.getItem('todos')) || []
        }
    },
    watch: {
      todos: {
        deep:true,
       handler (value) {
        localStorage.setItem('todos',JSON.stringify(value))
       }
      }
    },
    methods :{
      // 添加一个todo
      receive (x) {
        console.log('我是App组件,我收到了数据',x)
        this.todos.unshift(x)
      },
      //勾选or取消勾选一个todo
      checkTodo(id) {
        console.log('@@@@@@@',id)
        this.todos.forEach((todo) => {
          if (todo.id === id ) {
            todo.done = !todo.done
          }
        })
      },
      // 删除一个todo
      deleteTodo ( id ) {
        // this.todos = this.todos.filter( todo => todo.id !==id )
        this.todos = this.todos.filter((todo)=>{
           return todo.id !== id
        })

      },
      // 全选或是全不选
      checkAllTodo (done) {
        this.todos.forEach((todo)=>{
          todo.done = done
        })
      },
      // 清除所有已经完成的todo
      clearAllTodo () {
        this.todos = this.todos.filter((todo)=>{
          return !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.5);
    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>