Localstorage details of Use

What is the most frustrating thing for front-end developers? Needless to say, it's a matter of page data transfer. Resolves the same domain transfer, then there are cross-domain issues waiting for us. In short, this piece of the problem is the most difficult for us to solve. But with the advent of H5, it has brought me more APIs that allow us to solve problems that were difficult to solve before. Remember that before we passed the data the most is the cookie, session and URL with parameters past, but now H5 brought us the Web Storage and postmessage. When we encounter problems can not hair beard a grasp, should be specific analysis of the problem. Most of the problems I encountered before were data transfer in the same domain, with more web Storage. Let me start with a brief introduction to the use of Web Storage and personal use.

　　Web Storage

　　This is an object in H5, and this object has two properties, Localstorage and Sessionstorage. Sessionstorage as the name implies, in fact, is only limited to the current window of the data transfer, if the window is closed, then the bound value is not. Therefore, in the actual development we seldom use the sessionstorage to pass the data. More of the use is localstorage. There are several methods that are included in this object:

. SetItem (Key,value);//key-value pairs to be passed by the binding

. GetItem (key);//The corresponding value is obtained according to Key

. RemoveItem (key);//delete the corresponding value according to key

In fact, these three methods are more commonly used methods.

Although Localstorage is useful, it also has some drawbacks:

1, localstorage because the browser security problem can not realize cross-domain data transfer, it can only accept the same protocol, the same port and host name of the same data transfer, and sessionstorage more stringent not only to meet the previous conditions, but also must be the same window!

2, there is a certain security problems, it is recommended that you use it, do not store some sensitive data;

3, only compatible with more than IE8 browser.

But these shortcomings do not affect our use of localstorage to develop. Instead of knowing some of its flaws, we can use it more rationally to help us do some work.

　　The life cycle of localstorage

　　because Localstorage is local storage, so its life cycle is always in our memory when you setitem. Even after you've created it, you turn off your computer and then turn it on. This time through the GetItem can also be able to obtain the corresponding value. So its life cycle is always there when it is not actively deleted. When the sessionstorage is closed, the saved value is destroyed as the browser window closes.

In fact, under the same domain value, Localstorage is very useful. Now we have used it in our project and helped me solve a lot of problems. But I was asked a few more embarrassing questions when I was doing technology sharing. Can localstorage solve cross-domain problems? At that time because the API is not very familiar with, so put a yellow gun. Some of the questions answered don't feel justified. So I went to the Internet to check some questions about how H5 solves cross-domain values, which is known as PostMessage (), which is shared in the notes that follow. The above content is only I learned after webstorage some of the experience, if there is insufficient place, I hope you can guide the great god, thank you!

Localstorage details of Use