vue+storage实现本地存储

a.html   b.html   

a.html 如何传递参数给b.html

1.先将a.html的参数存储在storage中

2.切换到b.html时取storage数据

考虑步骤

 1.使用bootstrap框架。

 2.引入了vuejs文件。

3.如何防止刷新页面后数据不消失。解决存储在前端。前端存储的好处,减少了http请求,减轻服务端的压力。

页面样式

分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap-3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/demo.css">
    <script src="../vuejs/vue.js"></script>
    <script src="./js/demo.js"></script>
</head>
<body>
    <div class="container" id="my">
        <div class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-1 control-label">昵称:</label>
                <div class="col-sm-11">
                    <input type="text" class="form-control name"
                    placeholder="请输入昵称" v-model="nickname">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">标题:</label>
                <div class="col-sm-11">
                    <input type="text" class="form-control name"
                    placeholder="请输入标题" v-model="title">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">内容:</label>
                <div class="col-sm-11">
                    <textarea  class="form-control message" rows="5"
                    placeholder="请输入内容" v-model=‘content‘>

                    </textarea>
                </div>
            </div>
            <div class="form-group btn-box">
              <div class="col-sm-offset-1 col-sm-11">
                    <button type="submit" class="btn btn-success submit"
                    @click="submit()">发布</button>
                    <button class="btn btn-danger deleteAll" @click="delAll()">删除所有</button>
              </div>
            </div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">
                文章列表
            </div>
            <div class="panel-body">
                <table class="table">
                    <thead>
                        <tr>
                            <th>标题</th>
                            <th>内容</th>
                            <th>发布者</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="o in listData">
                            <td> {{o.title}} </td>
                            <td> {{o.content}} </td>
                            <td> {{o.nickname}} </td>
                            <td>
                                <button @click="del(o.nickname)">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>
View Code

demo.js文件

//事件
window.onload = function () { //面向对象:抽象 多态 继承 封装 //对象:成员 方法 new Vue({ el: "#my", data: { nickname: ‘‘, title: ‘‘, content: ‘‘, listData: [{ nickname: "aaa", title: "test", content: "content" }] }, methods: { list: function () { var obj = localStorage.getItem(‘article‘); if (obj) { this.listData = JSON.parse(obj); } }, submit: function () { var obj = {} obj.nickname = this.nickname; obj.title = this.title; obj.content = this.content; this.listData.push(obj); localStorage.setItem(‘article‘, JSON.stringify(this.listData)); }, // 删除一条数据 del(nickname) { // for(var i=0;i<=this.listData.length;i++){ // if(this.listData[i].nickname===nickname){ // this.listData.splice(i,1); // break; // } // } this.listData = this.listData.filter(o=>o.nickname != nickname); //持久化 localStorage.setItem(‘article‘, JSON.stringify(this.listData)); }, delAll() { this.listData = []; localStorage.removeItem(‘article‘); } }, mounted() { //vue实例声明周期 this.list(); }, }) }
相关文章
相关标签/搜索