How to save a personalized homepage?

Previously, the core features of the personalized homepage have been implemented, including adding, setting, and disabling columns. However, there are still some problems, such as the failure to save customized column information, after refreshing the page, the entire page becomes blank and you need to add a new column. This is inconvenient for users. Therefore, we need to provide a customized topic information access mechanism to save the custom topic information of users when they leave the page, when loading the page, read the existing topic customization information and initialize the homepage.

1.Storage Method Selection

If the backend database supports this function, you can save customized topic information in the database and associate it with your information. The previously implemented personalized homepage does not require users to register and log on to the website. Therefore, the customized topic information is saved in cookies.

The storage format of customized topic information is also worth considering. The following methods are available.

LSave as XMLFormat

XML is a common text format. when parsing XML documents on the client, related third parties provide cross-browser solutions. However, for the problems to be solved, the XML method is cumbersome, and the efficiency is not optimal.

LSave as plain text

The method of saving as common text is relatively simple in implementation. You do not need to introduce a script library for XML parsing. You can complete the saving task through simple string processing. However, the disadvantage of this method is poor scalability. Now the content of customized topic information is very simple. If there are new requirements in the future. In this case, if you use plain text to save customized topic information, the related JavaScript code may need to be modified a lot.

LSave as JSONFormatted text

JSON text is actually a piece of JavaScript code, which can represent any JavaScript Object. Whatever method is used to save the topic customization information, you must convert it into a JavaScript Object and use it in JavaScript code. If JSON is used, the required JavaScript objects are saved directly. You only need to read the cookie during use and call the eval method to obtain the Javascript objects with customized topic information. This method is quite effective in terms of efficiency and scalability.

After the comparison above, select the JSON format text to save the topic custom information. The text actually saved in the cookie is as follows:

[

[

"Modelname", "type", "dbname", "dbtablename", "dbfieldname", "dbfilter"

],

[

"Modelname", "type", "xmlname", "xmlurl", "", ""

]

]

It represents a JavaScript Array object, and each of its members is a string array, representing the prompt content (passing parameters) in each container in the personalized page ).

2.CookieStorage and reading

The setcookie and readcookie methods implement cookie storage and reading respectively. The implementation method is relatively simple. You can refer to the following code:

FunctionSetcookie(Cookiename, cookievalue, ndays ){

// Current time

VaR today = new date ();

// Cookie expiration time

VaR expire = new date ();

// If the ndays parameter is not specified, the default cookie is saved for one day.

If (ndays = NULL | ndays = 0) ndays = 1;

Expire. settime (today. gettime () + 3600000*24 * ndays );

// Set the cookie value

Document. Cookie = cookiename + "=" + escape (cookievalue) + "; expires =" + expire. togmtstring ();

}

FunctionReadcookie(Cookiename ){

// Read the cookie value

VaR thecookie = "" + document. Cookie;

// Locate the location of cookiename

VaR ind = thecookie. indexof (cookiename );

// Cookie does not exist

If (IND =-1 | cookiename = "") Return "";

// Read the cookie value corresponding to cookiename

VaR ind1 = thecookie. indexof (';', IND );

If (ind1 =-1) ind1 = thecookie. length;

Return Unescape (thecookie. substring (IND + cookiename. Length + 1, ind1 ));

}

3.Saving customized topic information

The topic customization information is saved when the browser closes or leaves the page, that is, when the bodyOnUnloadEventThe savelayout () function saves customized topic information.The specific implementation method isTraverse the <div> object in each column container and save the parameter in the cookie. When adding a column, the parameter to be saved uses document. getelementbyid ("…"). Value or document. getelementbyid ("…"). Obtain innerhtml and then read and process it. The Code is as follows:

FunctionSavelayout(){

// String Array object

VaR DATA = [];

// Column container list

VaR contatiners = $ ("xmlcontainer", "dbcontainer ");

// Traverse each column container

Container. Each (function (container ){

// String Array object

VaR modulesdata = [];

// Column Div object

VaR modules = Document. getelementbyclassname ("modules", container );

// Traverse every topic object in the container

Modules. Each (function (module ){

// Obtain the parameter value

// Assign each obtained parameter value to the array

Modulesdata. Push (Value);

});

// Add the string array object to the data array

Data. Push ("[" "+ modulesdata. Join (", ") +"] ");

});

// Connect the JSON string that is finally saved to the cookie

VaR JSON = "([" + data. Join (",") + "])";

// Save the JSON string in the cookie

Setcookie ("Homepage", JSON, 7 );

}

 

The custom definition bar specifies the address for saving information, and uses document.exe ccommand ("saveas") to "save ".

 

4.Reading customized topic information

The topic customization information has been successfully saved to the cookie. The following function is to read the corresponding topic customization information from the cookie and initialize the topic. These operations will be performed inOnloadIn the response function Init. The Code is as follows:

FunctionInit(){

// Read Cookie Information

VaR cookiedate = readcookie ("Homepage ");

// Topic customization Information

VaR data;

// If no cookie information is available, use the default topic customization Information

If (! Cookiedata ){

Data =

[

[

"Dbsource", "DB", "deschema_test", "xsxx", "studentname, classno", "3"

],

[

"Xmlsource", "XML", "Authors", "E:/XML", "", ""

]

];

} Else {

// Use the column customization information in the cookie

Data = eval (cookiedata );

}

// Column container list

VaR contatiners = $ ("xmlcontainer", "dbcontainer ");

// Traverse customized topic information in Data

Data. Each (function (modulesdata, index ){

// Use the XMLHTTPRequest object of Ajax technology to complete Asynchronous interaction;

// Display the obtained data on the page

});

}