You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/v2/cookbook/client-side-storage.md
+38-38Lines changed: 38 additions & 38 deletions
Original file line number
Diff line number
Diff line change
@@ -1,24 +1,24 @@
1
1
---
2
-
title: Client-Side Storage (EN)
2
+
title: Stockage côté client
3
3
type: cookbook
4
4
order: 11
5
5
---
6
6
7
-
## Base Example
7
+
## Exemple de base
8
8
9
-
<p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <ahref="https://github.com/vuejs-fr/vuejs.org"target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>Client-side storage is an excellent way to quickly add performance gains to an application. By storing data on the browser itself, you can skip fetching information from the server every time the user needs it. While especially useful when offline, even online users will benefit from using data locally versus a remote server. Client-side storage can be done with [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies), [Local Storage](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) (technically "Web Storage"), [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API), and [WebSQL](https://www.w3.org/TR/webdatabase/) (a deprecated method that should not be used in new projects).</p>
9
+
Le stockage côté client est un excellent moyen de rapidement ajouter un gain de performance à une application. En stockant les données sur le navigateur, on peut récupérer ces données sans passer par le serveur chaque fois que l'utilisateur en a besoin. Bien que très utile hors-ligne, même en ligne les utilisateurs peuvent bénéficier d'une utilisation locale plutôt que d'utiliser un serveur distant. Le stockage côté client peut être fait avec les [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies), le [Local Storage](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) (techniquement "Web Storage"), une [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API), et[WebSQL](https://www.w3.org/TR/webdatabase/) (une méthode périmée qui ne devrait plus être utilisée dans de nouveaux projets).
10
10
11
-
In this cookbook entry we'll focus on Local Storage, the simplest of the storage mechanisms. Local Storage uses a key/value system for storing data. It is limited to storing only simple values but complex data can be stored if you are willing to encode and decode the values with JSON. In general, Local Storage is appropriate for smaller sets of data you would want to persist, things like user preferences or form data. Larger data with more complex storage needs would be better stored typically in IndexedDB.
11
+
Dans ce tutoriel on se concentrera sur le Local Storage, le moyen de stockage le plus simple. Le Local Storage utilise un système de clé/valeur pour stocker les données. Il est limité au stockage de simples valeurs mais des données plus complexes peuvent être stockées si on est prêt à encoder et décoder les valeurs en JSON. En général, le Local Storage est approprié pour des petits groupes de données qu'on voudrait garder en mémoire, comme des préférences ou les informations d'un formulaire. De plus grosses données avec une structure plus complexe feraient mieux d'être stockées sur une IndexedDB.
12
12
13
-
Let's begin with a simple form based example:
13
+
Commençons par un simple exemple basé sur un formulaire :
14
14
15
15
```html
16
16
<divid="app">
17
-
My name is <inputv-model="name">
17
+
Mon nom est <inputv-model="name">
18
18
</div>
19
19
```
20
20
21
-
This example has one form field bound to a Vue value called `name`. Here's the JavaScript:
21
+
Cet exemple a un champ lié à une valeur Vue appelée `name`. Voici le JavaScript:
22
22
23
23
```js
24
24
constapp=newVue({
@@ -39,42 +39,42 @@ const app = new Vue({
39
39
});
40
40
```
41
41
42
-
Focus on the `mounted`and`watch` parts. We use`mounted`to handle loading the value from localStorage. To handle writing the data base, we watch the `name`value and on change, immediately write it.
42
+
Concentrons-nous sur les parties `mounted`et`watch`. On utilise`mounted`pour récupérer la valeur depuis le localStorage. Pour garder les données en mémoire, on observe la valeur `name`et à chaque changement, on l'écrit dans le localStorage.
43
43
44
-
You can run this yourself here:
44
+
Vous pouvez le tester vous-même ici :
45
45
46
-
<pdata-height="265"data-theme-id="0"data-slug-hash="KodaKb"data-default-tab="js,result"data-user="cfjedimaster"data-embed-version="2"data-pen-title="testing localstorage"class="codepen">See the Pen <ahref="https://codepen.io/cfjedimaster/pen/KodaKb/">testing localstorage</a> by Raymond Camden (<ahref="https://codepen.io/cfjedimaster">@cfjedimaster</a>) on <ahref="https://codepen.io">CodePen</a>.</p>
46
+
<pdata-height="265"data-theme-id="0"data-slug-hash="KodaKb"data-default-tab="js,result"data-user="cfjedimaster"data-embed-version="2"data-pen-title="testing localstorage"class="codepen">Voir le Pen <ahref="https://codepen.io/cfjedimaster/pen/KodaKb/">test du localstorage</a> par Raymond Camden (<ahref="https://codepen.io/cfjedimaster">@cfjedimaster</a>) sur <ahref="https://codepen.io">CodePen</a>.</p>
Type something in the form and then reload this page. You'll note that the value you typed previously will show up automatically. Don't forget that your browser provides excellent developer tools for inspecting client-side storage. Here's an example in Firefox:
49
+
Écrivez quelque chose dans le formulaire et rechargez la page. Vous remarquerez que la valeur que vous aviez écrite s'affichera automatiquement. N'oubliez pas que votre navigateur a d'excellents outils de développement pour inspecter le stockage côté client. Voici un exemple sur Firefox:
50
50
51
-
51
+
52
52
53
-
And here it is in Chrome:
53
+
Ici sur Chrome:
54
54
55
-
55
+
56
56
57
-
And then finally, an example in Microsoft Edge. Note that you can find application storage values under the Debugger tab.
57
+
Finalement, un exemple sur Microsoft Edge. Notez que vous pouvez trouver les valeurs stockées sous l'onglet Debugger.
58
58
59
-
59
+
60
60
61
-
<pclass="tip">As a quick aside, these dev tools also offer you a way to remove storage values. This can be very useful when testing.</p>
61
+
<pclass="tip">Ces outils de développement permettent aussi de supprimer les données stockées. Ça peut être très utile pour faire des tests.</p>
62
62
63
-
Immediately writing the value may not advisable. Let's consider a slightly more advanced example. First, the updated form.
63
+
Stocker immédiatement une valeur peut ne pas être recommandé. Considérons un exemple un peu plus avancé. Premièrement, le formulaire mis à jour.
64
64
65
65
```html
66
66
<divid="app">
67
67
<p>
68
-
My name is <inputv-model="name">
69
-
and I am <inputv-model="age"> years old.
68
+
Mon nom est <inputv-model="name">
69
+
et j'ai <inputv-model="age"> ans.
70
70
</p>
71
71
<p>
72
-
<button@click="persist">Save</button>
72
+
<button@click="persist">Sauver</button>
73
73
</p>
74
74
</div>
75
75
```
76
76
77
-
Now we've got two fields (again, bound to a Vue instance) but now there is the addition of a button that runs a `persist` method. Let's look at the JavaScript.
77
+
Maintenant on a deux champs (encore, liés à une instance de Vue) mais maintenant il y a un bouton en plus qui lance une fonction `persist`. Regardons le JavaScript.
78
78
79
79
```js
80
80
constapp=newVue({
@@ -101,33 +101,33 @@ const app = new Vue({
101
101
})
102
102
```
103
103
104
-
As before, `mounted`is used to load persisted data, if it exists. This time, though, data is only persisted when the button is clicked. We could also do any validations or transformations here before storing the value. You could also store a date representing when the values were stored. With that metadata, the `mounted`method could make a logical call on whether or not to store the values again, such as in this version below. You can try this version below.
104
+
Comme avant, `mounted`est utilisé pour charger les données, si elles existent. Cette fois, les données sont sauvées seulement si le bouton est cliqué. On pourrait aussi faire des validations ou transformations ici avant de stocker les données. On pourrait aussi stocker une date représentant le moment ou les données ont été sauvées. Avec ces métadonnées, la fonction `mounted`pourrait vérifier si il faut encore stocker les valeurs. Vous pouvez essayer cette version ci-dessous.
105
105
106
-
<pdata-height="265"data-theme-id="0"data-slug-hash="rdOjLN"data-default-tab="js,result"data-user="cfjedimaster"data-embed-version="2"data-pen-title="testing localstorage 2"class="codepen">See the Pen <ahref="https://codepen.io/cfjedimaster/pen/rdOjLN/">testing localstorage 2</a> by Raymond Camden (<ahref="https://codepen.io/cfjedimaster">@cfjedimaster</a>) on <ahref="https://codepen.io">CodePen</a>.</p>
106
+
<pdata-height="265"data-theme-id="0"data-slug-hash="rdOjLN"data-default-tab="js,result"data-user="cfjedimaster"data-embed-version="2"data-pen-title="testing localstorage 2"class="codepen">Voir le Pen <ahref="https://codepen.io/cfjedimaster/pen/rdOjLN/">test du localstorage 2</a> par Raymond Camden (<ahref="https://codepen.io/cfjedimaster">@cfjedimaster</a>) sur <ahref="https://codepen.io">CodePen</a>.</p>
As mentioned above, Local Storage only works with simple values. To store more complex values, like objects or arrays, you must serialize and deserialize the values with JSON. Here is a more advanced example that persists an array of cats (the best kind of array possible).
111
+
Comme mentionné plus haut, le Local Storage marche seulement avec de simples valeurs. Pour stocker des valeurs plus complexes, comme un objet ou une liste, on doit sérialiser et désérialiser les valeurs avec JSON. Voici un exemple plus avancé qui sauvegarde une liste de chats (le meilleur type de liste possible).
112
112
113
113
```html
114
114
<divid="app">
115
-
<h2>Cats</h2>
115
+
<h2>Chats</h2>
116
116
<divv-for="(cat, n) in cats">
117
117
<p>
118
118
<spanclass="cat">{{ cat }}</span>
119
-
<button@click="removeCat(n)">Remove</button>
119
+
<button@click="removeCat(n)">Enlever</button>
120
120
</p>
121
121
</div>
122
122
123
123
<p>
124
124
<inputv-model="newCat">
125
-
<button@click="addCat">Add Cat</button>
125
+
<button@click="addCat">Ajouter un chat</button>
126
126
</p>
127
127
</div>
128
128
```
129
129
130
-
This "app" consists of a simple list on top (with a button to remove a cat) and a small form at the bottom to add a new cat. Now let's look at the JavaScript.
130
+
Cette "app" contient une simple liste (avec un bouton pour enlever un chat) et un petit formulaire pour ajouter un nouveau chat. Maintenant regardons le JavaScript.
131
131
132
132
```js
133
133
constapp=newVue({
@@ -147,7 +147,7 @@ const app = new Vue({
147
147
},
148
148
methods: {
149
149
addCat() {
150
-
//ensure they actually typed something
150
+
//s'assurer que l'utilisateur a entré quelque chose
151
151
if (!this.newCat) {
152
152
return;
153
153
}
@@ -168,21 +168,21 @@ const app = new Vue({
168
168
})
169
169
```
170
170
171
-
In this application, we've switched to use the Local Storage APIs versus "direct" access. Both work but the API method is generally preferred. `mounted`now has to grab the value and parse the JSON value. If anything goes wrong here we assume the data is corrupt and delete it. (Remember, any time your web application uses client-side storage, the user has access to it and can modify it at will.)
171
+
Dans cette application, on a utilisé l'API Local Storage à la place d'un accès "direct". Les deux marchent mais utiliser l'API est généralement la méthode préférée. `mounted`doit récupérer et parser la valeur en JSON. S'il y a un problème, on peut assumer que les données sont corrompues et les supprimer. (N'oubliez pas, quand votre application utilise le stockage côté client, l'utilisateur y a accès et peut les modifier à volonté.)
172
172
173
-
We have three methods now to handle working with cat. Both `addCat`and`removeCat`handle updating the "live" Vue data stored in `this.cats`. They then run`saveCats`which handles serializing and persisting the data. You can play with this version below:
173
+
Nous avons trois méthodes pour s'occuper de nos chats. `addCat`et`removeCat`s'occupent de mettre à jour les données de Vue stockées dans `this.cats`. Ensuite elles appellent`saveCats`qui s'occupe de sérialiser et sauver les données. Vous pouvez vous amuser avec la version ci-dessous :
174
174
175
-
<pdata-height="265"data-theme-id="0"data-slug-hash="qoYbyW"data-default-tab="js,result"data-user="cfjedimaster"data-embed-version="2"data-pen-title="localstorage, complex"class="codepen">See the Pen <ahref="https://codepen.io/cfjedimaster/pen/qoYbyW/">localstorage, complex</a> by Raymond Camden (<ahref="https://codepen.io/cfjedimaster">@cfjedimaster</a>) on <ahref="https://codepen.io">CodePen</a>.</p>
175
+
<pdata-height="265"data-theme-id="0"data-slug-hash="qoYbyW"data-default-tab="js,result"data-user="cfjedimaster"data-embed-version="2"data-pen-title="localstorage, complex"class="codepen">Voir le Pen <ahref="https://codepen.io/cfjedimaster/pen/qoYbyW/">localstorage, complexe</a> par Raymond Camden (<ahref="https://codepen.io/cfjedimaster">@cfjedimaster</a>) sur <ahref="https://codepen.io">CodePen</a>.</p>
While the Local Storage API is relatively simple, it is missing some basic features that would be useful in many applications. The following plugins wrap Local Storage access and make it easier to use, while also adding functionality like default values.
180
+
Bien que l'API Local Storage est relativement simple, il manque quelques fonctions basiques qui seraient utiles dans beaucoup d'applications. Les plugins suivants utilisent le Local Storage et facilitent son utilisation, tout en ajoutant quelques fonctionnalités comme les valeurs par défaut.
While the browser will never replace a server persistence system, having multiple ways to cache data locally can be a huge performance boost for your application, and working with it in Vue.js makes it even more powerful.
188
+
Bien que le navigateur ne remplacera jamais un système de stockage de données sur serveur, avoir plusieurs possibilités de sauver ces données localement peut être un énorme boost de performance pour votre application. Travailler avec dans Vue.js le rend encore plus puissant.
0 commit comments