Go App offline local storage solution

App offline local storage solution

Original address: http://ask.dcloud.net.cn/article/166

html5+ offline Local Storage has the following options:
HTML5 Standard Scheme: Cookies, Localstorage, Sessionstorage, Websql, IndexedDB
Html5plus expansion Scenarios: Plus.navigator.setCookie, Plus.storage, Plus.io

• Cookies
  The minimum volume, you can set the expiration time. Cannot cross domains.
• Localstorage
  Suitable for key and value value pairs of storage, the amount of data generally not more than 5M. is a common lightweight data storage solution. Cannot cross domains.
• Sessionstorage
  It is also a key-value pair, which is characterized by the disappearance of the app and the inability to cross webview, which is generally not used for persisted data preservation.
• Websql
  is the best solution for mobile phone-side relational database, all kinds of mobile phones are supported. Only the standard is no longer updated. But currently the only commercially available solution for weight data storage on mobile phones.
• IndexedDB
  Is the latest data storage specification in HTML5, but is not based on SQL, but on objects.
  INDEXEDDB performance is higher, all asynchronous processing, learning difficulty is too large. The most important is that the current mobile phone-side support is not. Android4.4 above and above iOS8 support INDEXEDDB.
• Plus.navigator.setCookie
  Compared to the standard cookie for HTML5, the plus extension is primarily for cross-domain. The so-called leap, is the local HTML page and server HTML page sharing cookie data, or the local page JS can manipulate the server page generated by the cookie. You do not need to use the plus extension if you do not cross demand.
• Plus.storage
  Plus.storage is also a key-value pair data store. It is the OS to the native app using the key value of the storage database to encapsulate a layer to JS use.
  Plus.storage does not have a theoretical size limit.
  Plus.storage is also a feature that can be cross-domain compared to localstorage. Cross-domain issues are involved when a stored data needs to be read and written both locally and from the server. At this time HTML5 Localstorage can not meet the demand, can only use Plus.storage.
  Plus.storage operation is slower than localstorage by dozens of milliseconds, if not because of size limit or spanning, try to use Localstorage.
  A user has encapsulated a framework, for key-value data, in localstorage more than 5m automatically switch to Plus.storage, reference http://ask.dcloud.net.cn/article/552. While this may sound a bit complicated, we appreciate the pursuit of the ultimate performance of developers.
• Plus.io
  Plus.io is a file read and write, although you can also read and write txt and other files to store data, but not as professional storage and websql convenient.
  Plus.io is more used for local preservation of multimedia files such as pictures.
  The offline use of the text list is generally 2 ways of doing it:
  
  
  
  1. Image download not through the IMG src, but plus.dowload download, first download the picture, save the path, then the IMG src dynamic specified file path
  2. The image is downloaded using the IMG SRC, and then the IMG is saved as a picture file using canvas. Next time the network is not networked, the IMG SCR directly points to the local file

It is asked whether the native Sqllite is available, the 5+ is not encapsulated, the HTML5 standard database is recommended.
Others ask why not encapsulate sqllite? Because HTML5 already has, the html5+ norm cannot duplicate the project.
Html5+ from the alliance under the guidance of the Dcloud is also a member of the general, the invention of the wheel does not benefit, will only increase the workload and increase the package volume.

Some people ask that the three-party cleanup tool to clean up the garbage will not cause some data loss, this possibility is present, but the probability is not high, depending on the cleaning software will not analyze which of your stored data can be purged of garbage data. In addition to the OS Cleanup tool, there is generally no root-privilege cleanup tool that does not have the storage data for your app except for Plus.io.

-------------------------------------------------------

My personal opinion: (by Liu Tao qq30234923 2016-09-27)

Localstorage speed, but small capacity 2~5m, suitable for cross-page parameter transfer, keep a small amount of data (text and small pictures), etc.
Localstorage has a good feature that is overlooked, if your program needs to access the same value (localstorage key value) on different pages, you need to know if the value has been changed by another page, you can register the storage event with the browser to implement
【
Window.addeventlistener (' Storage ', function (e) {
Console.log (E.key + "s value is changed from '" + E.oldvalue + "' to '" + E.newvalue + "' by" + E.url);
}, False);

A page
localstorage[' foo '] = ' bar ';

b page
localstorage[' foo '] = ' newBar ';
】
can be used for web-side implementation of IM, push and so on, the benefits greatly

IndexedDB code Development on the comparison of anti-human, related query multi-conditional query processing difficulties, need to bypass the implementation, the appropriate NoSQL fan, on some browsers have capacity limitations, most of them are not limited, I have not specifically tested.

Websql (SQLite) is very friendly, the user has not maintained it since 2010, because it has nothing to maintain, is the embedding of SQLite. SQLite is very mature, you do not expect an embedded database to achieve the performance of Oracle, not the Xiali as a Ferrari to open. I plugged hundreds of megabytes of data into the browser client, no problem.


Base64 is a good thing, the object text, encrypted, but the size of a one-third large, drizzle.


The following method is better, I think if and my (Websql imitation localstorage solution), it is perfect, and cross-platform does not need a pedestal, save a few 10 trillion no problem.
HTML5 saving pictures and files in local storage
Http://www.tuicool.com/articles/fiYJry

So my view is: Localstorage + websql + base64 + HTML5 local storage save picture and File + mui (or 5+) = Chonay (the tip of the tiny allure)

---------------------------------------------------------------------

Essence: HTML5 with websql imitation localstorage almost no size limit, more practical than Localstorage and Plus.storage by Liu Tao

2016-09-25

Websql_localstorage_liutao.js: Using Websql to imitate localstorage no size limit

Websql operations from online materials, enhanced by Liutao QQ 30234923
Database Operations helper classes, definition objects, data manipulation methods are defined here


Table kv three fields: (K,v, update time)
The following KV function automatically opens the database, builds the table and so on, simple call can
Note that Websql is asynchronous and you cannot expect the next sentence to get the changed value immediately after SetItem. You must continue to the next sentence in the callback function

1.
Websql_exesql (' delete from kv where k=? ', [' Little Red ']); [' Little Red ', ' a ', ' B ']
Websql_exesql (' delete from kv where k=\ ' Little Red '; ‘);
Websql_exesql (' CREATE INDEX IF not EXISTS idx_kv_k on KV (k); ');
Websql_exesql (' CREATE INDEX IF not EXISTS idx_kv_k on KV (k); ', [], function () {
Alert (' fix ');
});


2.
Websql_localstorage_getitem (' Little Red ', function (k,v, update time, this K record number) {
alert (' \ n ' + k + ' \ n ' + V + ' \ n ' + update time);

If (this K record number > 1)
Alert (' Abnormal but not wrong: websql_localstorage_getitem:k=[' + K + '], this k corresponds to the number of records = ' + this k record number);
});

3.
Websql_localstorage_setitem (' Little Red ', ' Hey hehe 4 ');
Websql_localstorage_setitem (' Little Red ', ' Hey hehe 3 ', function (k,v, update time) {
alert (' \ n ' + k + ' \ n ' + V + ' \ n ' + update time);
});

4.
Websql_localstorage_removeitem (' Little Red ');
Websql_localstorage_removeitem (' Little Red ', function (k) {
alert (' \ n ' + k + ' \ n ');
});

5.
Websql_localstorage_length (function (length) {
alert (' \ n websql_localstorage_length = ' + length + ' \ n ');
});

6.
Websql_localstorage_clear ();

Go App offline local storage solution