{ "cells": [ { "cell_type": "code", "execution_count": 2, "id": "979a911a", "metadata": {}, "outputs": [], "source": [ "class Human {\n", "\n", " constructor(name, age){\n", " this.name = name;\n", " this.age = age;\n", " }\n", " \n", " toJSON(){\n", " return {\n", " type: \"Human\",\n", " age: this.age,\n", " name: this.name,\n", " }\n", " }\n", "}\n", "\n", "class Gnome{\n", " constructor(name, height){\n", " this.name = name;\n", " this.height = height;\n", " }\n", "\n", " toJSON(){\n", " return {\n", " type: \"Gnome\",\n", " name: this.name,\n", " height: this.height,\n", " }\n", " }\n", "}\n" ] }, { "cell_type": "markdown", "id": "3ec0891a-3c4d-41b0-99d2-80260344274e", "metadata": {}, "source": [ "### Objectif, sérialiser une liste de gnome ou d'human" ] }, { "cell_type": "code", "execution_count": 6, "id": "84f50c8f-5f0a-42fc-ac45-36ddba69d18c", "metadata": {}, "outputs": [], "source": [ "const persons = [\n", " new Human(\"Boutros\", 89),\n", " new Human(\"Fares\", 12),\n", " new Gnome(\"Petit Pied\", 102),\n", " new Gnome(\"Grand Gaillard\", 135),\n", "]\n", "\n", "\n", "function serializePersons(persons){\n", " const personObjets = persons.map(person => person.toJSON())\n", " localStorage.setItem(\"persons.json\", JSON.stringify(personObjets));\n", "}\n", "\n", "serializePersons(persons)" ] }, { "cell_type": "markdown", "id": "2b05a60d-974c-4e91-b9fb-c17e042445cd", "metadata": {}, "source": [ "### Le statue de local storage est donc..." ] }, { "cell_type": "code", "execution_count": 7, "id": "4c46686d-9099-48f0-bcd0-1703eb385ade", "metadata": { "scrolled": true }, "outputs": [ { "name": "stdout", "output_type": "stream", "text": [ "[{\"type\":\"Human\",\"age\":89,\"name\":\"Boutros\"},{\"type\":\"Human\",\"age\":12,\"name\":\"Fares\"},{\"type\":\"Gnome\",\"name\":\"Petit Pied\",\"height\":102},{\"type\":\"Gnome\",\"name\":\"Grand Gaillard\",\"height\":135}]\n" ] } ], "source": [ "console.log(localStorage.getItem(\"persons.json\"))" ] }, { "cell_type": "markdown", "id": "dd8acf55-c0f6-4638-905e-12e8c80c8bbd", "metadata": {}, "source": [ "### Plus bas, il s'agit de la logique pour deserialiser les personnes" ] }, { "cell_type": "code", "execution_count": 22, "id": "ef98a65f-8156-4f27-943c-d17b63111838", "metadata": {}, "outputs": [], "source": [ "function deserializeHumanObject(humanObject){\n", " return new Human(humanObject.name, humanObject.age)\n", "}\n", "\n", "function deserializeGnomeObject(gnomeObject){\n", " return new Gnome(gnomeObject.name, gnomeObject.height)\n", "}\n", "\n", "function deserializePersonObject(person){\n", " if(person.type === \"Human\"){\n", " return deserializeHumanObject(person);\n", " }\n", " if(person.type === \"Gnome\"){\n", " return deserializeGnomeObject(person);\n", " }\n", "}\n", "\n", "\n", "function deserializePersons(){\n", " const personObjects = JSON.parse(localStorage.getItem(\"persons.json\"));\n", " if(!personObjects){\n", " return []; // le cas ou il n'y a rien de sauvegarder dans \"persons.json\"\n", " }\n", " return personObjects.map(deserializePersonObject)\n", "}" ] }, { "cell_type": "markdown", "id": "b325ab23-811f-489e-a974-13f64a1ce9e0", "metadata": {}, "source": [ "### Plus bas, voici comment deserialiser toutes les personnes du localstorage" ] }, { "cell_type": "code", "execution_count": 20, "id": "690b3db8-ad1d-433b-82dc-58afe4c97927", "metadata": {}, "outputs": [ { "data": { "text/plain": [ "[]" ] }, "execution_count": 20, "metadata": {}, "output_type": "execute_result" } ], "source": [ "deserializePersons()" ] }, { "cell_type": "markdown", "id": "6ca1e818-7bf9-4641-a219-db4a4ae56b79", "metadata": {}, "source": [ "Cas special: deserializer un constenue de localstorage vide" ] }, { "cell_type": "code", "execution_count": 21, "id": "4fcdaa7e-0d7c-4bbb-8a70-ffb6586387fd", "metadata": {}, "outputs": [ { "data": { "text/plain": [ "[]" ] }, "execution_count": 21, "metadata": {}, "output_type": "execute_result" } ], "source": [ "localStorage.clear() // efface tout du localstorage. Le cas du premier visiteur\n", "deserializePersons()" ] } ], "metadata": { "kernelspec": { "display_name": "Deno", "language": "typescript", "name": "deno" }, "language_info": { "file_extension": ".ts", "mimetype": "text/x.typescript", "name": "typescript", "nb_converter": "script", "pygments_lexer": "typescript", "version": "5.3.3" } }, "nbformat": 4, "nbformat_minor": 5 }