Vue使用localStorage存储数据的方法

本文分享了Vue使用localStorage存储数据的具体代码，供大家参考。具体内容如下

通过以下案例了解本地存储的基本用法。

输入评论者和评论内容，点击进行评论，评论数据将保存在localStorage中，评论列表将被刷新。

1.首先组织一个新的注释数据对象

Varcomment={id:date。现在()，用户：此。用户，内容：此。内容} 2。将获得的注释对象保存在本地存储中

1.localStorage只支持存储字符串数据，保存前调用JSON.stringify将其转换为字符串

2.在保存最新的注释数据之前，首先从localStorage获取之前的注释数据(字符串)并将其转换为数组对象，然后将最新的注释推送到这个数组中

3.如果获得的localStorage中的注释字符串为空且不存在，您可以返回一个“[]”供JSON.parse进行转换

4.通过再次调用JOSN.stringify将最新的注释列表数组转换为数组字符串，然后调用localStorage.setItem()保存它

html头元http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/link rel='样式表' type='text/css' href='./CSS/bootstrap . CSS ' rel=' external no follow '/head body div id=' app ' Cmt-box @ func=' LoadComments '/Cmt-box ul class=' list-group ' Li class=' list-group-item ' v-for=' list '中的项目' : key=' item '。id' span class=' badge '评论者：{ { item . user } }/Span { { item }。content}}/Li/ul/div模板ID=' tmp 1 ' Div class=' form-group ' Label Commented by:/Label输入类型=' text ' v-model=' user ' class=' form-control '/Div class=' form-group ' Label注释内容：/Label text area class=' form-control ' v-model=' content '/text area/Div class=' form-group '输入类型=' button ' value=' comment ' class=' btnbtn-primary ' @单击=' postment '/Div./lib/vue . js '/script script var conmmentBox={ template : ' # tmp 1 '，data(){ return{ user: ' '，content:'' } }，methods : { post mment(){//1。其中注释数据存储在localStorage //2中。先整理一个最新的评论数据对象//3。想办法把第二步得到的注释对象保存在localStorage] //3.1 localStorage只支持存储字符串数据。在保存最新的注释数据之前，调用JSON.stringify //3.2，从localStorage获取之前的注释数据(字符串)并转换成数组对象，然后将最新的注释推送到这个数组。//3.3如果localStorage中的注释字符串为空且不存在，可以返回一个'[]'让JSON.parse转换//3.4最新的注释列表数组，再次调用JOSN.stringify将其转换为数组字符串，然后调用localstorage。setitem()varcomment={ id 3360 date。现在()，用户3360此。用户。Content:this.content} //从localStorage var list=JSON获取使用的注释。解析(本地存储。getitem ('cmts') | |' []')列表。unshift (comment)//保存最新的注释数据localstorage.setitem ('cmts '，JSON . stringfy(list))this . user=this . content=' ' this。$ emit(' func ')} } } var VM=new vue({ El : ' # app }，Data: {list: []}，methods : {//从本地localStorage，Load comments list Load comments(){ var list=JSON . parse(local storage . getitem(' cmts ')| '[]')此。list=list}}，created () {this。loadcomments ()}，Components : { ' CMT-box ' : comment box } }/script/html可以打开开发人员模式查看localStorage保存的数据

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。