{"id":1043,"date":"2015-01-28T17:24:37","date_gmt":"2015-01-28T22:24:37","guid":{"rendered":"http:\/\/bioinfo.iric.ca\/?p=1043"},"modified":"2016-11-08T09:30:15","modified_gmt":"2016-11-08T14:30:15","slug":"stockage-de-donnees-cote-client","status":"publish","type":"post","link":"https:\/\/bioinfo.iric.ca\/fr\/stockage-de-donnees-cote-client\/","title":{"rendered":"Stockage de donn\u00e9es c\u00f4t\u00e9 client"},"content":{"rendered":"<p>La publication d&rsquo;un outil via une\u00a0application web le rend \u00e0 la fois\u00a0accessible et facile \u00e0 maintenir. Il est donc naturel que plusieurs outils bioinformatiques soient dot\u00e9s d&rsquo;une interface web. Cependant, certaines consid\u00e9rations l\u00e9gales et de s\u00e9curit\u00e9 informatique doivent \u00eatre prises en compte\u00a0si l&rsquo;on compte traiter\u00a0certains types d&rsquo;information (p.ex. m\u00e9dicales ou propri\u00e9taires). Dans de tels cas, il est pr\u00e9f\u00e9rable de stocker ces informations localement dans le navigateur de l&rsquo;utilisateur. Il existe une multitude de technologies de stockage local,\u00a0ce qui peut rendre le choix difficile. Vous trouverez ci-dessous\u00a0un survol des diff\u00e9rentes technologies de stockage local pr\u00e9sentement disponibles<i>.<\/i><\/p>\n<h1>Web Storage<\/h1>\n<p><i>Recommandation\u00a0W3C le 30 juillet 2013.<\/i><\/p>\n<p>Une sp\u00e9cification d\u00e9j\u00e0 bien r\u00e9pandue du standard HTML5 d\u00e9crivant une interface de programmation. Impl\u00e9ment\u00e9e \u00e0 la base en tant qu&rsquo;une interface <em>Storage<\/em>, cette interface est\u00a0\u00e9tendue par deux attributs, <em>localStorage<\/em> et <em>sessionStorage<\/em>.<\/p>\n<p><strong>Limites de stockage<\/strong> : Une limite de base de 5MB est impl\u00e9ment\u00e9e par la plupart des navigateurs modernes (suivant les recommandations d\u00e9crites par le W3C). Une exception \u00e0 la r\u00e8gle est le navigateur Internet Explorer 8 et versions subs\u00e9quentes qui semblent offrir jusqu&rsquo;\u00e0 10MB par d\u00e9faut. Certains navigateurs permettent de modifier\u00a0manuellement cette valeur par l&rsquo;entremise du menu de configuration et\/ou offrent la possibilit\u00e9 \u00e0 l&rsquo;utilisateur d&rsquo;augmenter la limite lorsqu&rsquo;elle est atteinte.<\/p>\n<p><strong>Support :<\/strong>\u00a0Une technologie d\u00e9j\u00e0 bien \u00e9tablie. Support\u00e9e par la plupart des navigateurs modernes.<\/p>\n<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 hundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-overflow:visible;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-one-full fusion-column-first fusion-column-last fusion-column-no-min-height\" style=\"--awb-bg-size:cover;--awb-margin-bottom:0px;\"><div class=\"fusion-column-wrapper fusion-flex-column-wrapper-legacy\"><div id=\"attachment_987\" style=\"width: 679px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/bioinfo.iric.ca\/wpbioinfo\/wp-content\/uploads\/2015\/01\/indexeddb.png\"><img decoding=\"async\" aria-describedby=\"caption-attachment-987\" class=\"wp-image-987 size-large\" src=\"https:\/\/bioinfo.iric.ca\/wpbioinfo\/wp-content\/uploads\/2015\/01\/localstorage-1024x308.png\" alt=\"localstorage\" width=\"669\" height=\"201\" srcset=\"https:\/\/bioinfo.iric.ca\/wpbioinfo\/wp-content\/uploads\/2015\/01\/localstorage-300x90.png 300w, https:\/\/bioinfo.iric.ca\/wpbioinfo\/wp-content\/uploads\/2015\/01\/localstorage-1024x308.png 1024w, https:\/\/bioinfo.iric.ca\/wpbioinfo\/wp-content\/uploads\/2015\/01\/localstorage.png 1108w\" sizes=\"(max-width: 669px) 100vw, 669px\" \/><\/a><p id=\"caption-attachment-987\" class=\"wp-caption-text\">http:\/\/caniuse.com\/#feat=namevalue-storage<\/p><\/div>\n<h3>localStorage<\/h3>\n<p style=\"padding-left: 30px;\">Un simple syst\u00e8me clef-valeur regroupant\u00a0un grand r\u00e9pertoire de librairies lui conf\u00e9rant une gamme de fonctions suppl\u00e9mentaires. Un th\u00e8me commun retrouv\u00e9 entre ces libraires semble \u00eatre\u00a0l&rsquo;abstraction de fonctions de\u00a0base de donn\u00e9es (certaines avec leur propre langage de requ\u00eate) et le support d&rsquo;un grand nombre de\u00a0navigateurs en offrant la possibilit\u00e9 de\u00a0stocker les donn\u00e9es par l&rsquo;entremise d&rsquo;une diff\u00e9rente technologie (p.ex.\u00a0<em>cookies<\/em>) pour les navigateurs ne supportant pas <em>Web Storage<\/em>.\u00a0Une liste (incompl\u00e8te) de ces librairies peut \u00eatre retrouv\u00e9e\u00a0<a href=\"https:\/\/github.com\/bebraw\/jswiki\/wiki\/Storage-libraries\">ici<\/a> et <a href=\"http:\/\/jster.net\/blog\/-storage-libraries-explored\">ici<\/a>.<\/p>\n<p style=\"padding-left: 30px;\">Lors d&rsquo;un projet r\u00e9cent, je me suis content\u00e9 d&rsquo;utiliser l&rsquo;ensemble minimal de fonctions de base de donn\u00e9es offertes par <em><a href=\"https:\/\/github.com\/knadh\/localStorageDB\">localstorageDB.js<\/a><\/em>. Occupant \u00e0\u00a0peine 6KB (minifi\u00e9), cette librairie repose sur un\u00a0code mature et est r\u00e9guli\u00e8rement mise \u00e0 jour. Elle ne tente aucunement d&rsquo;offrir des fonctions complexes et\u00a0superflues telles que le repli vers d&rsquo;autres technologies de stockage\u00a0lors d&rsquo;un manque de support. Plut\u00f4t, un petit enssemble d&rsquo;op\u00e9rations de base sont offertes afin de stocker et de retirer\u00a0des objets du localStorage en JSON.<\/p>\n<h3>sessionStorage<\/h3>\n<p style=\"padding-left: 30px;\">Quasi identique \u00e0 localStorage. Usage destin\u00e9 au stockage de donn\u00e9es non persistantes (contrairement \u00e0 localStorage, l&rsquo;information ne survivra pas lors de la fermeture de la fen\u00eatre du navigateur).<\/p>\n<h1>IndexedDB<\/h1>\n<p><em>Recommandation W3C le\u00a08 janvier\u00a02015.<\/em><\/p>\n<p>Une addition assez r\u00e9cente aux sp\u00e9cifications de stockage HTML5. Offre une alternative plus complexe du Web Storage. Plus semblable \u00e0 une base de donn\u00e9es traditionnelle avec un index et un\u00a0stockage hi\u00e9rarchique d&rsquo;objets. Contrairement \u00e0 Web Storage, offre une garantie transactionnelle.<\/p>\n<p><strong>Support :<em>\u00a0<\/em><\/strong>Pas aussi bien support\u00e9 que Web Storage (sp\u00e9cialement sur mobile).<\/p>\n<div class=\"fusion-clearfix\"><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-1 fusion_builder_column_1_1 1_1 fusion-one-full fusion-column-first fusion-column-last fusion-column-no-min-height\" style=\"--awb-bg-size:cover;--awb-margin-bottom:0px;\"><div class=\"fusion-column-wrapper fusion-flex-column-wrapper-legacy\"><div id=\"attachment_986\" style=\"width: 679px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/bioinfo.iric.ca\/wpbioinfo\/wp-content\/uploads\/2015\/01\/indexeddb.png\"><img decoding=\"async\" aria-describedby=\"caption-attachment-986\" class=\"wp-image-986 size-large\" src=\"https:\/\/bioinfo.iric.ca\/wpbioinfo\/wp-content\/uploads\/2015\/01\/indexeddb-1024x311.png\" alt=\"indexeddb\" width=\"669\" height=\"203\" srcset=\"https:\/\/bioinfo.iric.ca\/wpbioinfo\/wp-content\/uploads\/2015\/01\/indexeddb-300x91.png 300w, https:\/\/bioinfo.iric.ca\/wpbioinfo\/wp-content\/uploads\/2015\/01\/indexeddb-1024x311.png 1024w, https:\/\/bioinfo.iric.ca\/wpbioinfo\/wp-content\/uploads\/2015\/01\/indexeddb.png 1109w\" sizes=\"(max-width: 669px) 100vw, 669px\" \/><\/a><p id=\"caption-attachment-986\" class=\"wp-caption-text\">http:\/\/caniuse.com\/#feat=indexeddb<\/p><\/div>\n<p>&nbsp;<\/p>\n<hr \/>\n<p><em>(Autres technologies de stockage local non mentionn\u00e9es)<\/em><\/p>\n<h2>Web SQL<\/h2>\n<p>Une sp\u00e9cification HTML5 maintenant obsol\u00e8te. Bien que certains navigateurs supportent encore une impl\u00e9mentation bas\u00e9e sur les premi\u00e8res recommandations du W3C, il est\u00a0mieux de laisser\u00a0cette option\u00a0de c\u00f4t\u00e9.<\/p>\n<h2>Cookies<\/h2>\n<p>Le stockage c\u00f4t\u00e9 client original. Offre un m\u00e9canisme pour stocker de petits\u00a0(jusqu&rsquo;\u00e0 4KB) morceaux\u00a0d&rsquo;information localement. Peu\u00a0pratique pour le stockage d&rsquo;un grand nombre\u00a0de donn\u00e9es.<\/p>\n<h2>Application Cache<\/h2>\n<p>Peu utile pour le stockage et la r\u00e9cup\u00e9ration de donn\u00e9es d&rsquo;application web mais m\u00e9rite toutefois d&rsquo;\u00eatre mentionn\u00e9. Permet de sp\u00e9cifier, avec l&rsquo;aide d&rsquo;un manifeste de m\u00e9moire cache, une liste de ressources \u00e0 garder en m\u00e9moire (ou non) sur le navigateur de l&rsquo;utilisateur. Tente d&rsquo;offrir une mani\u00e8re de permettre \u00e0 une application web d&rsquo;op\u00e9rer tant bien en ligne que hors ligne.<div class=\"fusion-clearfix\"><\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>La publication d&rsquo;un outil via une\u00a0application web le rend \u00e0 la fois\u00a0accessible et facile \u00e0 maintenir. Il est donc naturel que plusieurs outils bioinformatiques soient dot\u00e9s d&rsquo;une interface web. Cependant, certaines consid\u00e9rations l\u00e9gales et de s\u00e9curit\u00e9 informatique doivent \u00eatre prises en compte\u00a0si l&rsquo;on compte traiter\u00a0certains types d&rsquo;information (p.ex. m\u00e9dicales ou propri\u00e9taires). Dans de tels cas, il est pr\u00e9f\u00e9rable de stocker ces informations localement dans le navigateur de l&rsquo;utilisateur. Il existe une multitude de technologies de stockage local,\u00a0ce qui peut rendre <a href=\"https:\/\/bioinfo.iric.ca\/fr\/stockage-de-donnees-cote-client\/\"> [&#8230;]<\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[2],"tags":[],"class_list":["post-1043","post","type-post","status-publish","format-standard","hentry","category-non-classifiee"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/bioinfo.iric.ca\/fr\/wp-json\/wp\/v2\/posts\/1043","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bioinfo.iric.ca\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bioinfo.iric.ca\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bioinfo.iric.ca\/fr\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/bioinfo.iric.ca\/fr\/wp-json\/wp\/v2\/comments?post=1043"}],"version-history":[{"count":30,"href":"https:\/\/bioinfo.iric.ca\/fr\/wp-json\/wp\/v2\/posts\/1043\/revisions"}],"predecessor-version":[{"id":2745,"href":"https:\/\/bioinfo.iric.ca\/fr\/wp-json\/wp\/v2\/posts\/1043\/revisions\/2745"}],"wp:attachment":[{"href":"https:\/\/bioinfo.iric.ca\/fr\/wp-json\/wp\/v2\/media?parent=1043"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bioinfo.iric.ca\/fr\/wp-json\/wp\/v2\/categories?post=1043"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bioinfo.iric.ca\/fr\/wp-json\/wp\/v2\/tags?post=1043"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}