使用Vue发表评论的功能实现步骤
分析:发表评论的业务逻辑
- 评论数据存到哪里去??? 存放到 localStorage 中的 localStorage.setItem(“str”,"")
- 先组织处一个最新的评论对象
- 想办法,把 第二步中得到的评论对象,保存到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() 方法: