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?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu