Reception database

js operation of Array

Tail by: arr.push (ele)

Kubi增: arr.unshift (ele)

Tail puncturing: arr.pop ()

First deletion: arr.shift ()

CRUD interpolation: arr.splice (begin_index, count, args)

Reception database

Deposit

Persistent storage, permanent preservation

localStorage.name = "kai";

localStorage["name"] = 'kai';

Persistent storage, life cycle with their labels (page), the page is closed, reopened will be lost

sessionStorage.name = "kai";

take

var a = localStorage.key console.log(a)

var b = localStorage['key'] console.log(b)

console.log(localStorage.name);
console.log(sessionStorage.name);

Clear all

localStorage.clear();
sessionStorage.clear();

Empty one pair

localStorage.removeltem("a")

Short board: only store strings, arrays, and all the objects need to be converted into json type string, then storing
the let A = [. 1, 2,. 3];
localStorage.arr the JSON.stringify = (A);
the let B = the JSON .parse (localStorage.arr);
the console.log (B);

Case

message board
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        li:hover {
            color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="app">
    <form>
        <input type="text" v-model="info">
        <button type="button" @click="sendInfo">留言</button>
    </form>
    <ul>
        <li v-for="(info, index) in info_arr" @click="deleteInfo(index)">{{info}}</li>
    </ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            info: '',
            // 三目运算符： 条件 ? 结果1 : 结果2
            info_arr: localStorage.info_arr ? JSON.parse(localStorage.info_arr) : [],
        },
        methods: {
            sendInfo () {
                // 完成留言：将 info 添加到 info_arr
                // 增 push unshift | 删 pop shift
                if (this.info){
                    // 留言
                    this.info_arr.push(this.info);
                    // 清空输入框
                    this.info = '';
                    // 前台数据持久化（缓存）
                    localStorage.info_arr = JSON.stringify(this.info_arr)
                }

            },
            deleteInfo (index) {
                // 删
                this.info_arr.splice(index, 1);
                // 同步给数据库
                localStorage.info_arr = JSON.stringify(this.info_arr);
            }
        }
    })
</script>
</html>
splice

to sum up:

Array操作
    arr.push(ele)  arr.unshift(ele)
    arr.pop()  arr.shift()
    arr.splice(begin_index, count, args)

前台数据库
    localStorage | sessionStorage
    1  操作就类似于obj，直接 .key 语法访问 value
    2  localStorage永久存储
    3  sessionStorage生命周期同所属页面标签

Reception database

Reception database

Guess you like