How to Develop chrome extension 3: about local storage data

1. Teach you how to develop chrome extension 1: Developing chrome extenstion is actually very simple
2. Teach you how to develop chrome extension 2: Add behavior for HTML
3. How to Develop chrome extension 3: about local storage data

Localstorage in HTML5

Localstorage is similar to Cookie. It is the data stored in the client browser. It is different from Cookie because it has no time limit. Localstorage is a new feature in HTML5. In Statistics on localstorage supported by browsers, chrome4 +, firefox3.5 +, IE8 +, IE7 compatibility mode, safari4 +, and opera10.5 + all support localstorage. Run the following code to check whether your browser supports localstorage:

If (window. localstorage) {alert ('your browser supports localstorage! ');} Else {alert ('The browser does not support localstorage! ');}

Localstorage is stored in key/value mode, and value can only be a string. If you want to use other data types, you need to convert them accordingly. To set and obtain localstorage, use localstorage.Key, Or localstorage [Key] Format, such:

localStorage.myName='walkingp';localStorage['mySite']='http://www.cnblogs.com/walkingp';alert('name:' + localStorage.myName + '\rsite:' + localStorage['mySite']);

Modifying the value is to reset the value of the corresponding localstorage item. To remove a value, you can set it to null.

localStorage['mySite']=null;

You can also use the built-in Methods getitem (), setitem (), and removeitem () of localstorage to obtain, set, and remove localstorage items.

localStorage.setItem('age','24');var age=localStorage.getItem('age');alert('age:' + age);//age:24localStorage.removeItem('age');age=localStorage.getItem('age');alert('age? ' + age);//age? null

You can use the clear () method to clear all localstorage.

Localstorage for different domains, such as local and a.com, does not affect each other.

For the local storage size of localstorage, some testing results show that other browsers are 5 MB, and Firefox has no restrictions. The cookie is usually only a few K. It can be seen that localstorage is very suitable for a slightly larger data storage, of course it is very suitable for chrome and other extension development.

Localstorage management tool in the browser

Chrome and Safari both have their own local localstorage viewing and management tools. Firefox has a third-party plug-in to manage localstorage, databases in chrome on the left side of resources in Developer Tools (a version earlier may be in a separate toolbar ). The above localstorage can be viewed in chrome as follows. You can use this tool to modify or delete the corresponding items.

In safari, select "show development options in the menu" in "preference settings" and "advanced.

Start to store our localstorage

The above is what we need to know about localstorage. Next we will apply this knowledge to our chrome extension. Our data storage is divided into two parts. One is the content that each task needs to store. It is stored in JSON format, as follows:

Task1: {"ID": 1, "task_item": "New Task", "add_time": "2011-04-04t03: 20: 34.879z", "is_finished": false}

Task1 indicates the key item, and JSON indicates the value item in the background. Is_finished indicates whether the current task has been completed. When the task status is updated, the value is changed accordingly.

You also need to put a data pointing to the current task to act as a pointer, so that you do not need to query the ID of an existing task item when adding a new item.

'Tasks:index':1

The specific implementation of our code is as follows:

VaR tasks = {// pointer index: window. localstorage. getitem ('tasks: Index'), // initialize init: function () {If (! Tasks. index) {window. localstorage. setitem ('tasks: Index', tasks. index = 0);} // initialize the data if (window. localstorage. length-1) {var task_list = []; var key; For (VAR I = 0, Len = Window. localstorage. length; I <Len; I ++) {key = Window. localstorage. key (I); If (/task: \ D + /. test (key) {task_list.push (JSON. parse (window. localstorage. getitem (key) ;}}for (VAR I = 0, Len = task_list.length; I <Len; I ++) {tasks. appendhtml (task_list [I]) ;}}, // ***}

Then, add (), edit (), and delete del:

// Add: function (task) {// update the pointer window. localstorage. setitem ('tasks: Index', ++ tasks. index); task. id = tasks. index; window. localstorage. setitem ("task:" + tasks. index, JSON. stringify (task) ;}, // modify EDIT: function (task) {window. localstorage. setitem ("task:" + task. ID, JSON. stringify (task) ;}, // Delete DEL: function (task) {window. localstorage. removeitem ("task:" + task. ID );},//***

JSON. stringify is a method in which JSON converts the Javascript data structure to JSON text. It is interoperable with eval. Details are visible to the http://json.org/js.html.

In this way, we have completed a simple chrome extension, as shown below:

Of course, its current functions are not powerful enough, and we can continue to expand it, such as task sorting, task grouping, network storage, and timed reminders.

This is the end of the series of articles. All the Code, including the generated. CRX file, has been packaged. Click here for download. There may be some imperfections in the code. You are welcome to point out one by one and make common progress!