The HTML5 Web Storage API makes it possible to store data locally, and can store 5M of data, which can be used by a domain at will. Note that it is a domain, which means that the saved data cannot be accessed across domains. I always like to learn new knowledge in practice, and today is no exception. I used localStorage to make a small note application, and the data is stored in the browser. How about it, not bad, right? Let's use this example development process to introduce localStorage! Getting Started I won’t paste the HTML and CSS code here. If you want to run this example locally, I will provide the source code download link at the end of the article. First of all, I would like to talk about how to create such a note. The specific process should be as follows.
According to the above process, you can write the following code
It is worth noting that localStorage can only save string values, so we have to use JSON to convert it to a string here. You can use the following code to store an integer or floating point number.
This line of code does work, that's because JS automatically converts it to a string, so if you want to get an integer out, you have to convert it, like this.
In the above code, two custom functions are used, namely getNotesArray() and addNoteToDOM(). Their functions can be easily identified by their names. However, it is puzzling why we need to use an array to store keys? There is one thing you need to know. In a real website, you can't just store notes, right? You also need to store a lot of other data. If you save a lot of other data, then finding notes is a very time-consuming task. Why should I look for notes? What if your user closes the browser and then reopens the website? At this time, we have to find the notes. Okay, let's take a look at the getNotesArray() function.
Use localStorage.getItem() to get the array. If the array does not exist, create one and then convert it into a string and save it. If the array already exists, convert it from a string to an array. In short, an array should be returned for us to use. Okay, now you know what we are talking about. Next is the addNoteToDOM() function. This function is even simpler. Let’s take a look at it.
First of all, we need to explain that #note-list is a <ul> element, and our notes are also composed of its child elements <li>. The rest is simple. We assign values to <li>, and then add different background colors to it according to the level of the tag. This is achieved by setting a class for it. It is worth noting that here we pass the key as a parameter, and use the key value to set the id attribute for <li>. This is to achieve the purpose of deletion. After all, we can't just create a tag without knowing how to delete it, so here we also set a click event for <li>.
When the <li> element is clicked, an event object will be passed in. Through target, we can get the object that triggered the event. We get the id of this object and delete it from the DOM. But this is not the point. Deleting a tag means that we also need to delete its value from the local storage and remove it from the key array. We use removeItem and splice() to achieve this goal. expand We have explained the use of localStorage above, and the code above contains the core code of the note application. It is worth mentioning that there is also a sessionStorage, which is used exactly the same as localStorage, the only difference is that once the browser window is closed, all the saved data will be deleted. Of course, this is an attribute in HTML5, so we need to detect it when using it. You can use the following code to detect whether the browser supports localStorage.
|
<<: In-depth exploration of the essence of Android asynchronous Handler
>>: Android Studio generates signature files, automatically signs, and obtains SHA1 and MD5 values
When you are busy at work, you will inevitably wa...
Topic: "Can online sales become a brand?&quo...
From the time when " Xiaonei.com " bega...
Wearing small flowered jackets, waving red handke...
A little of XX, some of XX, an appropriate amount...
When it comes to Botox, many people may associate...
On October 20, Li Jiaqi and Wei Ya’s live broadca...
September 5, 2018 is destined to be recorded in t...
Science Times reporter Hu Lijuan With the Nationa...
The Android system provides a variety of inter-pr...
How much does it cost to apply for a 400 phone nu...
There is a cruel fact: the online traffic dividen...
/* Live to change the world Here, every work may ...
As smartphone prices drop and mobile Internet bec...
[[145146]] The WatchKit, HealthKit, ApplePay and ...