How to realize the function of adding, deleting and modifying Local Storage by vue

This article is about how vue implements the function of adding, deleting and modifying local storage. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The details are as follows

Implement the function:

Add the input to the in-progress list

Double-click to modify function

Click the ESC button, cancel, or the previous content

Click enter to modify successfully.

Modified successfully when the modification box is out of focus

Enter the completed list when the button is selected, and enter the list in progress when unchecked

Click Delete to delete the current line

The next time the local storage is opened, the last one you added is still in

* {padding: 0 margin: 0;} ul {list-style: none;} li {width: 220px; height: 40px; border: 1px solid gainsboro; margin-top: 4px; display: flex; justify-content: space-between; align-items: center; background-color: # 6CE26C;} .del {margin-right: 5px; border: none; width: 20px; height: 20px Background-color: # 008200 {{undolist.length}} {{item.name}} X has completed {{doneList.length}} {{item.name}} X var vm=new Vue ({el: "# app" Data () {return {/ / inventory list / / getItem is used to obtain locally stored data / / | | "[]" if the array list:JSON.parse converted to empty is not available (localStorage.getItem ("list") | | "[]"), / / the temporary data store of the temporarily added data store temp:'', / / modify box tempEdit:''}} Methods: {/ / add additem () {/ / return if (this.temp=== "") {return if the text box is empty } / / add to the following this.list.push ({name:this.temp, done:false, state:0}) / / clear the temporary box this.temp= ";}, / / remove removeitem (item) {/ / pop-up box var flag=window.confirm (" are you sure you want to delete? ") ; if (flag) {/ / find the index value of the eligible element var ind=this.list.findIndex (value= > value.title===item.title); / / splice removes a this.list.splice (ind,1) from Ind }, computed: {/ / calculate the existing list data into the past function of the completed and uncompleted / / incomplete undolist () {/ / filter array. If the returned result is true, the data of the current traversal is retained / / otherwise the return this.list.filter (item= >! item.done) will be filtered out. }, / / completed doneList () {return this.list.filter (item= > item.done) }, watch: {"list": {handler () {/ / setItem set local data / / JSON.stringify convert js object to json string / / JSON.prase convert string to js object localStorage.setItem ("list", JSON.stringify (this.list))}, deep:true,})

Thank you for reading! This is the end of the article on "how to add, delete and modify local storage in vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!