Using JS to make an information management platform

First, introduce some basic knowledge that needs to be used.

"JSON"

JSON is one of the most common data formats used in data interactions.

Because different languages have different syntax, when you pass data, you can convert arrays, objects, and so on in your own language to JSON strings. Once passed, the JSON string can then be parsed into a JSON object.

The use of JSON objects is basically the same as the objects in JS, the only difference is that the keys in the JSON must be strings.

Like what:

var jsonobj = {
"Name": "Zhangsan",
"Age": "12"
}

There are also two particularly common functions.

* Converts the object, array, in JS into a JSON string.
*/
var str1 = json.stringify(users);
Console.log (STR1);
/*
* Converts a JSON string into a JSON object.
*/
var obj = json.parse(STR1);
Console.log (obj);

Summarize the basic ways to add or delete a piece of data.

"Add a new piece of data"
1, access to the input of various information
2. Encapsulate this information as an object.
3. From the local file, read out the array string that stores the data. And the string, back to the array format.
If the local file does not have this array, a new array is stored.
4, in the array, push into a newly-formed object.
5. Re-convert the new array to a string. Drop the string back into the file.
6. Re-read one side of the file and reload the table.


"Delete a piece of data"
1, from the file, read out the string, back to the array format.
2, the decision needs to delete the first few data.
3, delete the data corresponding to the array, splice
4. Re-convert the new array to a string and put back the file.
5. Re-read one side of the file and reload the table.

There are two main ways to add Web Storage to HTML5:
localstorage and sessionstorage, two objects have no difference in how they are used, the only difference is the effective time to store the data
①localstorage: Unless manually deleted, the data will remain in the local file;
②sessionstorage: Sessionstorage is emptied when the browser is closed.

[Storage data storage]
1, storage can be like ordinary objects, use. Append or read the latest data.
Eg:localStorage.username = "Zhang San";

2. Commonly used functions

Save data: Localstorage.setitem (Key,value);
Read data: Localstorage.getitem (key);
Delete individual data: Localstorage.removeitem (key);
Delete all data: Localstorage.clear ();
Get the Key:localStorage.key (index) of an index;

The following is a detailed description of the use of these functions in a specific case.

This is an information management platform, first we need to register an account.

Enclose a small number of form structure codes:

<div class= "right";
User registration
<span>user login</span>
< div class= "User",
<input placeholder= "3-15-digit alphanumeric, must begin with the letter" Name= "Userno" id= "Userno" tabindex= "1" class= " Account "autocomplete=" Off "
<span id=" P1 "> User name registered </span>
</div>
<div class=" pwd "
<input placeholder= "4-10-digit alphanumeric composition" type= "password" id= "pwd" name= "pwd" tabindex= "2" class= "PASSW" Autocomplete= "Off",
<span id= "P2" > two times Password input inconsistent </span>
</div>
<div class= "pwd" >
<input placeholder= "Please enter your password again" type= "password" id= "repwd" name= "pwd" tabindex= "2" class= "PASSW" autocomplete= " Off "
</div>
<input onclick=" addaize () "class=" Denglu "type=" Submit "value=" Note &nbsp; book " tabindex= "3",
<p class= "zhuce" onclick= "Denglu ()";
Click to return to the login page >>>
</p>
</div

When we click Register, a click event is triggered and then the function addaize () is triggered.

At this point, we need to verify that the password is correct, or that the input format meets the requirements.

First, let's take out what we've entered first.

var user = document.getElementById ("Userno"). Value;
var pwd = document.getElementById ("pwd"). Value;
var repwd = document.getElementById ("Repwd"). Value;

The specific verification requirements are verified by the regular, which is not detailed here.

If required, encapsulates the user name and password into an object.

var site = {
User:user,
Pwd:pwd
}

If you register for the first time, create a new array in local storage arr=[];

If you already have an array, enter this data.

if (localstorage.sites = = undefined) {
var arr = [];
}else{
var str = localstorage.sites;
var arr = json.parse (str);
}

Verify that the user name is duplicated or that the password input is two times consistent, not detailed here.

When all is verified, save this information locally and jump to the login page.

Arr.push (site);
var str = json.stringify (arr);
Localstorage.sites = str;
Alert ("Registered success");
Location = "Login. html";

Login function is actually similar to registration, but also from the local extraction of data, with the input of the data to do one by one, or have the same, then landed successfully, jump to the main page.

The information entry function of the management platform is also similar to the registration, not every example.

The main point here is the display and deletion of information functions.

First create a function showallsite ()

This function is called whenever the interface refreshes or the information is entered.

function Showallsite () {
var str = localstorage.sitess;
var arr = json.parse (str);
var html = "";
if (localstorage.sitess = = undefined) {
Return
}
Arr.foreach (function (item,index) {
HTML + = "<tr class= ' tr ' onclick= ' chooseinput (" +index+ ") ' ondblclick= ' Updatesite (" +index+ ") ' ><td align= ' Center ' ><input type= ' checkbox ' onclick= ' Chooseinput ("+index+") ' value= ' "+index+" ' class= ' checkbox ' style= ' margin-top:15px '/></td><td> "+ (index+1) +" </td><td> "+item.name+" </td><td> "+item.city+" </td><td> "+item.home+" </td><td style= ' Color:black ' > "+item.jingli+" </td ><TD style= ' color:black ' > ' +item.youbian+ ' </td><td style= ' color:black ' > ' +item.iphone+ ' </ TD><TD style= ' color:black ' > "+item.star+" </td></tr> ";
});
var tbody = document.getElementById ("tbody");
tbody.innerhtml = html;
}

Because the complete code too many, may take out a paragraph does not fully understand, I generally explain the idea.

Create an HTML variable and assign an empty string first.

First, the locally stored data is taken out and converted into an object format.

It then detects if the object exists, that is, whether there is more than one data locally.

Then iterate through the data, add them to the table, and attach them to the HTML variables.

Finally, use the tbody in the file to create a good table in the beginning. Through. InnerHTML = HTML. Print out the data.

This allows the added form to be displayed in a table.

Again, the deletion function is also created by creating a function delsite () attached to the onclick event of the Delete button.

It is important to note that the delete function must have a confirmation button, that is, confirm ().

When the result returns True, execute the function

var checkboxs = document.getelementsbyclassname ("checkbox");
var count = 0;
var str = localstorage.sitess;
var arr = json.parse (str);
for (var i=0; i<checkboxs.length; i++) {
if (checkboxs[i].checked) {
var index = parseint (checkboxs[i].value)-count;
count++;
Arr.splice (index,1);
}
}
localstorage.sitess = Json.stringify (arr);
if (count==0) {
Alert ("Please select at least one Delete object");
}else{
Alert ("Delete succeeded! Delete the "+count+" bar data altogether! ");
Showallsite ();
}

The core idea of this code is to add a value to each checkbox to match the index value of the row list by their value.

Detects if the Chenkbox is selected and deletes each of the selected rows.

Because to completely delete, so must not use Delete, to use Splice (index,1).

Such a simple information entry system is completed, more detailed features we will introduce later.

Using JS to make an information management platform