2021-05-17

使用Vue发表评论的功能实现步骤

分析：发表评论的业务逻辑

1. 评论数据存到哪里去？？？ 存放到 localStorage 中的 localStorage.setItem（“str”,""）
2. 先组织处一个最新的评论对象
3. 想办法，把 第二步中得到的评论对象，保存到localStorage中：
   3.1 localStorage只支持存放字符串数据，要先调用JSON.stringify
   3.2 在保存最新的评论数据之前，要先从 localStorage中获取到之前的评论数据（string），转换为一个 数组对象，然后，把最新的评论，unshift到这个数组
   3.3 如果获取到的localStorage中的评论字符串为空不存在，则 可以返回一个‘[ ]’ 让JSON.parse 去转换
   3.4 把最新的评论列表数组，再次调用JSON.stringify 转为数组字符串，然后调用localStorage.setItem( )

					var conment = { id: Date.now(), name: this.user, content: this.comment }
                    //获取localStorage中原来所有的评论
                    var list = JSON.parse(localStorage.getItem('ctm1') || '[]')
                    //将新的数据添加进去
                    list.unshift(conment)
                    //重新保存最新的评论数据
                    localStorage.setItem('ctm1', JSON.stringify(list))
                    this.user = this.comment = ''

Window.localStorage

存储在 localStorage 的数据可以长期保留 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
而 sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

另外，localStorage 中的键值对总是以字符串的形式存储。

// 存储
localStorage.setItem(“lastname”, “Smith”); //在本地存储中创建一个key为 lastname 值value为"Smith"的数据

// 检索
document.getElementById(“result”).innerHTML = localStorage.getItem(“lastname”); //在localStorage中检索获得key为 lastname 值

//删除
localStorage.removeItem(“key”);

（sessionStorage跟localStorage相同的方法）

localStorage其他注意事项

一般我们会将 JSON 存入 localStorage 中，但是在 localStorage 会自动将 localStorage 转换成为字符串形式。这个时候我们可以使用 JSON.stringify() 这个方法，来将 JSON 转换成为 JSON 字符串。

	var storage=window.localStorage;
    var data={
        name:'小白',
        sex:'man',
        hobby:'running'
    };
    var comment=JSON.stringify(data);
    storage.setItem("data",comment);
    console.log(storage.data);

读取之后要将 JSON 字符串转换成为 JSON 对象，使用 JSON.parse() 方法：