Basics of Data Storages www akvelon com

Basics of Data Storages www. akvelon. com

Basics of Data Storages General storages: • Global JS variables • Cookie • Limited/partially supported HTML 5 storages • local. Storage • session. Storage www. akvelon. com Slide 2 of 14

Basics of Data Storages JS scopes • Scope is the set of variables you have access to (objects and functions are also variables) • Local Java. Script Variables // code here can not use car. Name function my. Function() { var car. Name = "Volvo"; // code here can use car. Name } • Global Java. Script Variables var car. Name = " Volvo"; // code here can use car. Name function my. Function() { // code here can use car. Name } www. akvelon. com Slide 3 of 14

Basics of Data Storages A bit more about JS scopes • Automatically Global // code here can use car. Name function my. Function() { car. Name = "Volvo"; // code here can use car. Name } • Lifetime of Variables starts when declared and ends: local – when a function is completed, global – when page is closed. • Function arguments (parameters) work as local variables www. akvelon. com Slide 4 of 14

Basics of Data Storages Store data in Global variables • Pluses: § Quick and easy solution § There are no any conversions • Minuses § Variables could be rewritten accidentally (for example by another script) § After refresh the page or go to another we’ll lost all data www. akvelon. com Slide 5 of 14

Basics of Data Storages Cookies overview // setting the cookie value function set. Cookie(cookie. Name, cookie. Value, expiration. Days) { var expiration. Date = new Date(); expiration. Date. set. Date(expiration. Date. get. Date() + expiration. Days); cookie. Value = cookie. Value + "; expires=" + expiration. Date. to. UTCString(); document. cookie = cookie. Name + "=" + cookie. Value; } // retrieving the cookie value • Part of HTTP function get. Cookie(cookie. Name) { • Today, cookies are used mostly for var cookies = document. cookie. split("; "); storing basic user profile information for (var i = 0; i < cookies. length; i++) { var cookie = cookies[i]; • There are libraries to provide a much var index = cookie. index. Of("="); simpler interface var key = cookie. substr(0, index); • Every cookie is sent with each HTTP var val = cookie. substr(index + 1); request/response made if (key == cookie. Name) return val; } • Cookies are limited to about 4 KB of } data, which is not large, although you can // usage create more than 30 cookies per site set. Cookie('first. Name', 'Glenn', 1); var first. Name = get. Cookie('first. Name'); www. akvelon. com Slide 6 of 14

Basics of Data Storages Cookies summary • Pluses: § Solid way to send data and keep actual state § After the expiration of the session, closing a tab or browser - data is stored. § Cookies supported by all modern browsers • Minuses § Complex syntax of use (or using extra libraries) § Cookies saves only the string data, other types should be serialized using JSON. stringify and JSON. parse methods § Cookies are limited - not more than 20 cookies, every 4 KB § Cookies could be deleted or blocked § In some countries cookies are banned by government www. akvelon. com Slide 7 of 14

Basics of Data Storages Alternatives to cookies prior to HTML 5 ■ Flash Player Adobe – offer a reliable storage mechanism through its Local Shared Objects function. It comes with the ability to store much more data than cookies and gives the user the ability to increase or limit the amount of space allowed for each site. Another extremely useful feature of Local Shared Objects is its ability to be written by one browser and read by others. ■ User Data – Internet Explorer has supported an application programming interface (API), referred to as User Data, since version 5. It provides the ability to store up to 1 MB of information in the form of a key/value pair. Something like the HTML 5 storage offerings. ■ Google Gears – A solution that was ahead of its time was Google Gears, which several high-volume web utilities used, such as You. Tube and Gmail. In 2010, however, Google announced that it is no longer developing new features for Gears. Instead, Google’s efforts are turned to building on the HTML 5 web standards. ■ Java Applets – Another popular open-source which was another cross browser–friendly way to store information. However, like Flash Player and Gears, its usage is dropping dramatically in favor of HTML 5 alternatives. Why it’s bad? • Plug-in required • User blocking – because of security and performance concerns, many users install tools such as Flash blockers • Corporate users – in some organizations, employees are prohibited from installing third-party plug-ins to avoid potential security vulnerabilities • Vendor-specific – the biggest drawback to each plug-in option is that it relies on individual vendors for support and development www. akvelon. com Slide 8 of 14

Basics of Data Storages Limited/partially supported HTML 5 storages • Web SQL § Supported Chrome (v 22. 0+), Safari (v 5. 1+), Safari Mobile (v 3. 2+), Blackberry (v 7. 0+), Android (v 2. 1+), Opera (v 12. 0+) § Not supported Internet Explorer, Firefox, Opera Mobile • Indexed. DB § Supported Internet Explorer (v 10. 0 and newer versions), Firefox (v 15. 0+), Chrome (v 23. 0+), Blackberry (v 10. 0+) § Not supported Safari, Safari Mobile, Android, Opera Mobile • File. System API § Supported Chrome (v 22. 0+), Blackberry (v 10. 0+) § Not supported Internet Explorer, Firefox, Safari Mobile, Android, Opera Mobile www. akvelon. com Slide 9 of 14

Basics of Data Storages Cheer! local. Storage! • Global object (not shared between browsers) • Simple API for reading and writing key/value pairs of strings • Provides following methods: set. Item(key, value), get. Item(key), remove. Item(key), clear(), length, key(index) Notes: length – property, key(index) possible to get out of range exception (check length) • Supported across desktop and mobile browsers (except Opera Mobile). • Supports a minimum of 5 MB of data (recommended by W 3 C) • Can store complex objects using “JSON. stringify(object)” and “JSON. parse(string)” methods • Values are never automatically passed to the server (compare with cookies!) var person = { first. Name: 'Glenn', last. Name: 'Johnson' }; local. Storage. set. Item('glenn', JSON. stringify(person)); var person 2 = JSON. parse(local. Storage. get. Item('glenn')); // person and person 2 are identical objects www. akvelon. com Slide 10 of 14

Basics of Data Storages session. Storage – one more Storage In most things it’s the same as local. Storage – syntax, type, limitets There are some special points: • No need to clear data after closing tab/window (auto-clearing) • Own context – different with local. Storage • You can’t share data between tabs/windows • Can be shared among any elements that exist on the page // Save data to session. Storage. set. Item('key', 'value'); // Get saved data from session. Storage var data = session. Storage. get. Item('key'); www. akvelon. com Slide 11 of 14

Basics of Data Storages local. Storage/session. Storage summary • Pluses: § Easy to use § There is a choice in permanent or temporary storage of data. § Can share data between tabs/windows § Supported across desktop and mobile browsers § Local storage of data • Minuses: § Synchronously reading and writing to the hard drive (Scanning for viruses can block it) § Possible slow search capabilities (not indexed) § No transaction support § Works only with strings, for complex objects need serialization www. akvelon. com Slide 12 of 14

Basics of Data Storages Trick with comments Function. prototype. to. String() - return all function code including comments function some. Static. Data() { /* { name: “Albert”, city: “Moscow” } */ } var data = JSON. parse(some. Static. Data. to. String()); www. akvelon. com Slide 13 of 14

Basics of Data Storages Handling storage events Needs to synchronize multiple tabs Events not received in tab where changes were made (Not for latest IE) Raised whenever an entry is added, updated, or removed The following is a list of properties included on the Storage. Event object: key, old. Value, new. Value, url, storage. Area • Could not be canceled, bubbled or interrupted • Session. Storage can’t pass this event across tabs, however can pass it across <iframe> elements • • window. add. Event. Listener('storage', function(e) { // handle event here alert(e. new. Value); }, false); www. akvelon. com Slide 14 of 14

Basics of Data Storages Exercise 1. 2. 3. 4. Create a contact book by using local. Storage. Subscribe to ‘storage’ event and display an alert message each time. Create simple chat across multiple tabs on one PC Modify your code to use session. Storage in some places www. akvelon. com Slide 15 of 14

Basics of Data Storages More Information: • Email: denis. golovko@akvelon. com • Google. com / Yandex. ru • Johnson G. Programming In HTML 5 With Java. Script And CSS 3: Training Guide Thank you! www. akvelon. com Slide 16 of 14