In vue, the input data on the home page is stored by clicking localStorage and displayed on the history page, so there is a problem of data coverage. - Codes Helper - Programming Question Answer

In vue, the input data on the home page is stored by clicking localStorage and displayed on the history page, so there is a problem of data coverage.

problem description

In the

vue project, the data is entered on the home page, saved and displayed on the history page using localStorage, and the new data will always overwrite the old data.

the environmental background of the problems and what methods you have tried

I have referred to the answers under similar questions, but failed. I have tried to use arrays, objects, and so on.

related codes

/ / Please paste the code text below (do not replace the code with pictures)
send data:
clickdetail: function () {

var storage = window.localStorage
var contrastdata = {}
contrastdata.chepai = this.$refs.nowchepai.value
contrastdata.time = this.$refs.nowtime.innerText
contrastdata.chexin = this.$refs.nowchexin.value
storage.setItem("contrastdata", JSON.stringify(contrastdata))
}

receive data:
var contrastdata = JSON.parse (storage.getItem ("contrastdata"))
var chepai = contrastdata.chepai
var chexin = contrastdata.chexin
var time = contrastdata.time

what result do you expect? What is the error message actually seen?

expect the page to show that there is no data coverage problem, so you can record it one by one.

Html5 localstorage javascript

Jun.26,2022

save an array, and then push the new records

directly save the data that will definitely be overwritten. The solution is to save the new data directly through element groups, objects, and strings, as long as you can't save the new data directly, read the old data first, combine the new data with the old data and then save

my idea is
1. Using the unique value in the input data, create a unique key when storing, instead of using the key of 'contrastdata'', using a key will definitely overwrite the original data
2.localstorage is limited in size. If your data is accumulating all the time, you also need to consider the problem of data deletion, or store a certain amount of data according to a certain standard, such as the last 10 pieces of data or the data of the last 10 days. When constructing key, you can add some data to make it easy to determine which piece of data is in the last 10 or the last 10 days, and replace it on a first-in-first-out basis.

Previous: How to reference the custom class generated from the 5+SDK of the Dcloud platform?

Next: How does nuxt get data before vuex instantiation?

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e42518-449c3.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e42518-449c3.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?