演示文档一 - 临时文档

下山吃几个，哦不，渡几个人 - ADS

### Logical structure
#### `USER access`
```
→ Whether there is localStorage data
 → exist 
 → read 
	 → data sequence restore 
	 apply to current page
 → does not exist → end
```
#### `Edit Content `
```
→ Identify Active or Passive Save Operations
 → Get storage target object
 → Data serialization processing
 Store localStorage data
```
 
### Basic knowledge
LocalStorage is based on the same domain name, that is to say, no matter how many individual pages you have, as long as the domain name is the same, all data will be stored under this name, so you need **attention to the storage naming convention when you have multiple data pages**.

>In fact, I recommend jQuery more in terms of language, mainly because it is concise and clear and reduces a lot of operations. Of course, whether it is JavaScript or jQuery, the execution logic is the same.

When storing in localStorage, two data are needed: **`key`** and **`value`**.
When reading, get the corresponding **`value`** according to the **`key`** and return it to the page.
>Therefore, whether there is corresponding data depends on finding the **`key`**.

In the case of a small data, you can actually use **`if(localStorage.key)`** to quickly get. 
When there is lots of data, you can use **`localStorage.hasOwnProperty('key')`** for get array , which will return a boolean value that is true/false.

>When using localStorage data, the value will be used as string, so if have multiple arrays, you need to perform a split operation when using it.

Use jQuery to demonstrate filling single storage information for input: 
```
$("input").val(localStorage.key);
```

Creating storage data is also very simple, **`localStorage.key = `** target data, 
where `localStorage.key` is the same as `var`.

##### There are two ways to clear localStorage data:

| All data under the domain | **`localStorage.clear()`** |
| -------- | -------- |
| Data of the specified key | **`localStorage.removeItem("key")`** |
---
### DEMO
* Load data
```
function load(){
	if(localStorage.key) $("#ID").css("display","block");//Activate prompts
	if(localStorage.key) $("#ID") $("#ID").val(window.localStorage.ke);//Autofill after recognition
}
```
* Usage data – data based on manual operations or heavy processing
```
$("#insert").click(function(){
	//do something
});
```
* Clear data
```
$("#clear").click(function(){
	window.localStorage.removeItem("key"); //Single data cleaning
	localStorage.clear(); //Clear all, use with caution when there are multiple pages of data on the same site
});
```
* Save data
```
$("#save").click(function(){
	//Acquire and process data that needs to be stored
	Var detail = '';//Assignment is mainly used for arrays
	localStorage.key = detail;
	$("#tip").text('data cached in '+new Date().toLocaleTimeString('en-US',{hour12:false}));//Prompt in a specific area after saving
});
```
* Auto save
```
var autosave = window.setInterval(function(){$('#save').click()},60000 );
//The numbers are calculated in milliseconds
```
* KeyboardEvent Ctrl+S to save
```
function keyDown(e){
	currKey = e.keyCode||e.which||e.charCode;
	if(currKey == 83 &amp;&amp; (e.ctrlKey||e.metaKey)){
		$('#save').click();
		return false;
	}
}
document.onkeydown = keyDown;
```

施主且慢，化个缘吧 - ADS