jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

images to svg

Browse source
This commit is contained in:
Ilya Kantor 2019-07-28 15:42:37 +03:00
parent a31e881856
commit 3ba28aa104
734 changed files with 11682 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

8
6-data-storage/01-cookie/article.md
View file

@ -196,7 +196,7 @@ Now, while browsing the web in another window, you occasionally come to another
The form is submitted from `evil.com` directly to the bank site, and your cookie is also sent, just because it's sent every time you visit `bank.com`. So the bank recognizes you and actually performs the payment.
![](cookie-xsrf.png)
![](cookie-xsrf.svg)
That's called a cross-site request forgery (or XSRF) attack.
@ -358,15 +358,15 @@ For instance:
1. A page at `site.com` loads a banner from another site: `<img src="https://ads.com/banner.png">`.
2. Along with the banner, the remote server at `ads.com` may set `Set-Cookie` header with cookie like `id=1234`. Such cookie originates from `ads.com` domain, and will only be visible at `ads.com`:
![](cookie-third-party.png)
![](cookie-third-party.svg)
3. Next time when `ads.com` is accessed, the remote server gets the `id` cookie and recognizes the user:
![](cookie-third-party-2.png)
![](cookie-third-party-2.svg)
4. What's even more important, when the users moves from `site.com` to another site `other.com` that also has a banner, then `ads.com` gets the cookie, as it belongs to `ads.com`, thus recognizing the visitor and tracking him as he moves between sites:
![](cookie-third-party-3.png)
![](cookie-third-party-3.svg)
Third-party cookies are traditionally used for tracking and ads services, due to their nature. They are bound to the originating domain, so `ads.com` can track the same user between different sites, if they all access it.

BIN
6-data-storage/01-cookie/cookie-third-party-2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 18 KiB

28
6-data-storage/01-cookie/cookie-third-party-2.svg Normal file
View file

@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="668px" height="192px" viewBox="0 0 668 192" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>cookie-third-party-2.svg</title>
<desc>Created with sketchtool.</desc>
<g id="data-storage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="cookie-third-party-2.svg">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="38" y="48" width="282" height="99"></rect>
<text id="&lt;img-src=&quot;https://ad" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="42" y="70">&lt;img src="https://ads.com/banner.png"&gt;</tspan>
</text>
<text id="site.com" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="149" y="36">site.com</tspan>
</text>
<rect id="Rectangle-1-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="505" y="48" width="140" height="99"></rect>
<text id="ads.com" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="543" y="36">ads.com</tspan>
</text>
<path id="Line" d="M485.492587,91.6098407 L321.374704,69.3565684 L321.643432,67.3747042 L485.761314,89.6279765 L486.567496,83.682384 L499.5,92.5 L484.686405,97.5554332 L485.492587,91.6098407 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="GET-/banner.png" transform="translate(416.568389, 68.381858) rotate(7.000000) translate(-416.568389, -68.381858) " font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="361.068389" y="73.8818576">GET /banner.png</tspan>
</text>
<text id="cookie:-id=123" transform="translate(410.079569, 93.199054) rotate(7.000000) translate(-410.079569, -93.199054) " font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="363.079569" y="98.6990536">cookie: id=123</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
6-data-storage/01-cookie/cookie-third-party-2@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 41 KiB

BIN
6-data-storage/01-cookie/cookie-third-party-3.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 19 KiB

29
6-data-storage/01-cookie/cookie-third-party-3.svg Normal file
View file

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="668px" height="192px" viewBox="0 0 668 192" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>cookie-third-party-3.svg</title>
<desc>Created with sketchtool.</desc>
<g id="data-storage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="cookie-third-party-3.svg">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="38" y="48" width="282" height="99"></rect>
<text id="&lt;img-src=&quot;https://ad" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="42" y="70">&lt;img src="https://ads.com/banner.png"&gt;</tspan>
</text>
<text id="other.com" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="144" y="36">other.com</tspan>
</text>
<rect id="Rectangle-1-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="505" y="48" width="140" height="99"></rect>
<text id="ads.com" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="543" y="36">ads.com</tspan>
</text>
<path id="Line" d="M485.492587,91.6098407 L321.374704,69.3565684 L321.643432,67.3747042 L485.761314,89.6279765 L486.567496,83.682384 L499.5,92.5 L484.686405,97.5554332 L485.492587,91.6098407 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="GET-/banner.png" transform="translate(416.568389, 68.381858) rotate(7.000000) translate(-416.568389, -68.381858) " font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="361.068389" y="73.8818576">GET /banner.png</tspan>
</text>
<text id="cookie:-id=123" transform="translate(410.079569, 93.199054) rotate(7.000000) translate(-410.079569, -93.199054) " font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="363.079569" y="98.6990536">cookie: id=123</tspan>
</text>
<ellipse id="Oval-6" stroke-opacity="0.572803442" stroke="#EE6B47" stroke-width="2" cx="176" cy="31.5" rx="48" ry="13.5"></ellipse>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
6-data-storage/01-cookie/cookie-third-party-3@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 47 KiB

BIN
6-data-storage/01-cookie/cookie-third-party.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 20 KiB

29
6-data-storage/01-cookie/cookie-third-party.svg Normal file
View file

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="668px" height="192px" viewBox="0 0 668 192" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>cookie-third-party.svg</title>
<desc>Created with sketchtool.</desc>
<g id="data-storage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="cookie-third-party.svg">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="38" y="48" width="282" height="99"></rect>
<text id="&lt;img-src=&quot;https://ad" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="42" y="70">&lt;img src="https://ads.com/banner.png"&gt;</tspan>
</text>
<text id="site.com" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="149" y="36">site.com</tspan>
</text>
<rect id="Rectangle-1-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="505" y="48" width="140" height="99"></rect>
<text id="ads.com" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="543" y="36">ads.com</tspan>
</text>
<path id="Line" d="M485.492587,88.6098407 L321.374704,66.3565684 L321.643432,64.3747042 L485.761314,86.6279765 L486.567496,80.682384 L499.5,89.5 L484.686405,94.5554332 L485.492587,88.6098407 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy" d="M336.262135,126.742529 L500.365913,105.881879 L500.618121,107.865913 L336.514342,128.726563 L337.270966,134.678665 L322.5,129.5 L335.505512,120.790427 L336.262135,126.742529 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="GET-/banner.png" transform="translate(416.568389, 65.381858) rotate(7.000000) translate(-416.568389, -65.381858) " font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="361.068389" y="70.8818576">GET /banner.png</tspan>
</text>
<text id="Set-Cookie:-id=123" transform="translate(413.468881, 128.991204) rotate(-7.000000) translate(-413.468881, -128.991204) " font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="352.968881" y="134.491204">Set-Cookie: id=123</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
6-data-storage/01-cookie/cookie-third-party@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 47 KiB

BIN
6-data-storage/01-cookie/cookie-xsrf.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 20 KiB

34
6-data-storage/01-cookie/cookie-xsrf.svg Normal file
View file

@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="668px" height="166px" viewBox="0 0 668 166" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>cookie-xsrf.svg</title>
<desc>Created with sketchtool.</desc>
<g id="data-storage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="cookie-xsrf.svg">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="38" y="48" width="282" height="88"></rect>
<text id="&lt;form-action=&quot;https:" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="48" y="69">&lt;form action="https://bank.com/pay"&gt;</tspan>
<tspan x="48" y="88"> ....</tspan>
<tspan x="48" y="107">&lt;/form&gt;</tspan>
</text>
<text id="evil.com" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="149" y="36">evil.com</tspan>
</text>
<rect id="Rectangle-1-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="505" y="48" width="140" height="88"></rect>
<text id="got-the-cookie?-okay" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="526.469238" y="108">got the cookie?</tspan>
<tspan x="558.307617" y="127">okay!</tspan>
</text>
<text id="bank.com" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="543" y="36">bank.com</tspan>
</text>
<path id="Line" d="M485.492587,91.6098407 L321.374704,69.3565684 L321.643432,67.3747042 L485.761314,89.6279765 L486.567496,83.682384 L499.5,92.5 L484.686405,97.5554332 L485.492587,91.6098407 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="POST-/pay" transform="translate(409.575842, 67.259988) rotate(7.000000) translate(-409.575842, -67.259988) " font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="376.075842" y="72.7599882">POST /pay</tspan>
</text>
<text id="cookie:-user=John" transform="translate(407.075842, 90.259988) rotate(7.000000) translate(-407.075842, -90.259988) " font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="349.075842" y="95.7599882">cookie: user=John</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
6-data-storage/01-cookie/cookie-xsrf@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 49 KiB

4
6-data-storage/03-indexeddb/article.md
View file

@ -174,7 +174,7 @@ An example of object that can't be stored: an object with circular references. S
A key must have a type one of: number, date, string, binary, or array. It's an unique identifier: we can search/remove/update values by the key.
![](indexeddb-structure.png)
![](indexeddb-structure.svg)
As we'll see very soon, we can provide a key when we add a value to the store, similar to `localStorage`. But when we store objects, IndexedDB allows to setup an object property as the key, that's much more convenient. Or we can auto-generate keys.
@ -551,7 +551,7 @@ openRequest.onupgradeneeded = function() {
Imagine that our `inventory` has 4 books. Here's the picture that shows exactly what the `index` is:
![](indexeddb-index.png)
![](indexeddb-index.svg)
As said, the index for each value of `price` (second argument) keeps the list of keys that have that price.

BIN
6-data-storage/03-indexeddb/indexeddb-cursor.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 17 KiB

45
6-data-storage/03-indexeddb/indexeddb-cursor.svg Normal file
View file

@ -0,0 +1,45 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="312px" height="291px" viewBox="0 0 312 291" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>indexeddb-cursor.svg</title>
<desc>Created with sketchtool.</desc>
<g id="data-storage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="indexeddb-cursor.svg">
<path d="M161,43 L161,101 L268,101 L268,43 L161,43 Z" id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB"></path>
<path d="M161,43 L161,101 L274,101 L274,43 L161,43 Z" id="Rectangle-1-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB"></path>
<text id="id:-'html'-price:-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="171" y="66">id: 'html'</tspan>
<tspan x="171" y="81">price: 3</tspan>
</text>
<path d="M161,101 L161,159 L274,159 L274,101 L161,101 Z" id="Rectangle-1-Copy-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB"></path>
<text id="id:-'css'-price:-5" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="171" y="124">id: 'css'</tspan>
<tspan x="171" y="139">price: 5</tspan>
</text>
<path d="M161,159 L161,217 L274,217 L274,159 L161,159 Z" id="Rectangle-1-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB"></path>
<text id="id:-'js'-price:-10" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="171" y="182">id: 'js'</tspan>
<tspan x="171" y="197">price: 10</tspan>
</text>
<path d="M161,217 L161,275 L274,275 L274,217 L161,217 Z" id="Rectangle-1-Copy-4" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB"></path>
<text id="id:-'nodejs'-price:" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="171" y="240">id: 'nodejs'</tspan>
<tspan x="171" y="255">price: 10</tspan>
</text>
<text id="books" font-family="OpenSans-Regular, Open Sans" font-size="18" font-weight="normal" fill="#8A704D">
<tspan x="160" y="31">books</tspan>
</text>
<text id="cursor" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal" fill="#8A704D">
<tspan x="1" y="79">cursor</tspan>
</text>
<path id="Line" d="M92.5290935,61.9295774 L167.596553,69.6069312 L167.393069,71.5965528 L92.3256094,63.919199 L91.7151573,69.8880639 L78.5,61.5 L93.1395456,55.9607125 L92.5290935,61.9295774 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy" d="M91.9207297,79.2074366 L166.941663,74.9448836 L167.055116,76.9416631 L92.0341831,81.2042161 L92.3745433,87.1945546 L78,81 L91.5803696,73.2170981 L91.9207297,79.2074366 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="primaryKey" font-family="OpenSans-Regular, Open Sans" font-size="16" font-weight="normal" fill="#8A704D">
<tspan x="66" y="51">primaryKey</tspan>
</text>
<text id="key" font-family="OpenSans-Regular, Open Sans" font-size="16" font-weight="normal" fill="#8A704D">
<tspan x="93" y="101">key</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
6-data-storage/03-indexeddb/indexeddb-cursor@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 41 KiB

BIN
6-data-storage/03-indexeddb/indexeddb-index.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 25 KiB

46
6-data-storage/03-indexeddb/indexeddb-index.svg Normal file
View file

@ -0,0 +1,46 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="473px" height="291px" viewBox="0 0 473 291" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>indexeddb-index.svg</title>
<desc>Created with sketchtool.</desc>
<g id="data-storage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="indexeddb-index.svg">
<path d="M17,43 L17,101 L124,101 L124,43 L17,43 Z" id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB"></path>
<path d="M17,43 L17,101 L130,101 L130,43 L17,43 Z" id="Rectangle-1-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB"></path>
<text id="id:-'html'-price:-3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="27" y="66">id: 'html'</tspan>
<tspan x="27" y="81">price: 3</tspan>
</text>
<path d="M17,101 L17,159 L130,159 L130,101 L17,101 Z" id="Rectangle-1-Copy-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB"></path>
<text id="id:-'css'-price:-5" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="27" y="124">id: 'css'</tspan>
<tspan x="27" y="139">price: 5</tspan>
</text>
<text id="3:-['html']-5:-['css" font-family="PTMono-Regular, PT Mono" font-size="20" font-weight="normal" line-spacing="30" fill="#8A704D">
<tspan x="245" y="60">3: ['html']</tspan>
<tspan x="245" y="90">5: ['css']</tspan>
<tspan x="245" y="120">10: ['js','nodejs']</tspan>
</text>
<path d="M17,159 L17,217 L130,217 L130,159 L17,159 Z" id="Rectangle-1-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB"></path>
<text id="id:-'js'-price:-10" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="27" y="182">id: 'js'</tspan>
<tspan x="27" y="197">price: 10</tspan>
</text>
<path d="M17,217 L17,275 L130,275 L130,217 L17,217 Z" id="Rectangle-1-Copy-4" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB"></path>
<text id="id:-'nodejs'-price:" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="27" y="240">id: 'nodejs'</tspan>
<tspan x="27" y="255">price: 10</tspan>
</text>
<text id="books" font-family="OpenSans-Regular, Open Sans" font-size="18" font-weight="normal" fill="#8A704D">
<tspan x="16" y="31">books</tspan>
</text>
<text id="index" font-family="OpenSans-Regular, Open Sans" font-size="18" font-weight="normal" fill="#8A704D">
<tspan x="245" y="31">index</tspan>
</text>
<path id="Line" d="M223.5,57.5 L220.5,57.5 L220.5,55.5 L223.5,55.5 L223.5,49.5 L237.5,56.5 L223.5,63.5 L223.5,57.5 Z M216.5,55.5 L216.5,57.5 L211.5,57.5 L211.5,55.5 L216.5,55.5 Z M207.5,55.5 L207.5,57.5 L202.5,57.5 L202.5,55.5 L207.5,55.5 Z M198.5,55.5 L198.5,57.5 L193.5,57.5 L193.5,55.5 L198.5,55.5 Z M189.5,55.5 L189.5,57.5 L184.5,57.5 L184.5,55.5 L189.5,55.5 Z M180.5,55.5 L180.5,57.5 L175.5,57.5 L175.5,55.5 L180.5,55.5 Z M171.5,55.5 L171.5,57.5 L166.5,57.5 L166.5,55.5 L171.5,55.5 Z M162.5,55.5 L162.5,57.5 L157.5,57.5 L157.5,55.5 L162.5,55.5 Z M153.5,55.5 L153.5,57.5 L148.5,57.5 L148.5,55.5 L153.5,55.5 Z M144.5,55.5 L144.5,57.5 L139.5,57.5 L139.5,55.5 L144.5,55.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy" d="M224.66239,91.1741321 L221.929809,92.1557389 L221.253665,90.2734986 L223.986246,89.2918919 L221.957812,83.645171 L237.5,85.5 L226.690824,96.820853 L224.66239,91.1741321 Z M217.489184,91.6257877 L218.165329,93.508028 L213.459728,95.1983894 L212.783583,93.3161491 L217.489184,91.6257877 Z M209.019103,94.6684383 L209.695247,96.5506786 L204.989647,98.24104 L204.313502,96.3587997 L209.019103,94.6684383 Z M200.549022,97.7110889 L201.225166,99.5933291 L196.519565,101.283691 L195.843421,99.4014503 L200.549022,97.7110889 Z M192.07894,100.753739 L192.755085,102.63598 L188.049484,104.326341 L187.37334,102.444101 L192.07894,100.753739 Z M183.608859,103.79639 L184.285004,105.67863 L179.579403,107.368992 L178.903258,105.486751 L183.608859,103.79639 Z M175.138778,106.839041 L175.814922,108.721281 L171.109321,110.411642 L170.433177,108.529402 L175.138778,106.839041 Z M166.668696,109.881691 L167.344841,111.763931 L162.63924,113.454293 L161.963096,111.572053 L166.668696,109.881691 Z M158.198615,112.924342 L158.87476,114.806582 L154.169159,116.496943 L153.493014,114.614703 L158.198615,112.924342 Z M149.728534,115.966992 L150.404678,117.849233 L145.699078,119.539594 L145.022933,117.657354 L149.728534,115.966992 Z M141.258452,119.009643 L141.934597,120.891883 L137.228996,122.582245 L136.552852,120.700004 L141.258452,119.009643 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy-2" d="M225.199039,129.259169 L222.565951,130.47039 L221.73014,128.653409 L224.363228,127.442188 L221.855794,121.991245 L237.5,122.5 L227.706473,134.710112 L225.199039,129.259169 Z M218.096178,130.325031 L218.931989,132.142012 L214.389537,134.23154 L213.553726,132.414559 L218.096178,130.325031 Z M209.919764,134.086182 L210.755575,135.903162 L206.213123,137.99269 L205.377312,136.17571 L209.919764,134.086182 Z M201.74335,137.847332 L202.579161,139.664313 L198.036709,141.753841 L197.200898,139.93686 L201.74335,137.847332 Z M193.566936,141.608482 L194.402747,143.425463 L189.860295,145.514991 L189.024484,143.698011 L193.566936,141.608482 Z M185.390522,145.369633 L186.226333,147.186614 L181.683881,149.276142 L180.848069,147.459161 L185.390522,145.369633 Z M177.214108,149.130783 L178.049919,150.947764 L173.507467,153.037292 L172.671655,151.220311 L177.214108,149.130783 Z M169.037694,152.891934 L169.873505,154.708915 L165.331053,156.798443 L164.495241,154.981462 L169.037694,152.891934 Z M160.86128,156.653084 L161.697091,158.470065 L157.154638,160.559593 L156.318827,158.742612 L160.86128,156.653084 Z M152.684865,160.414235 L153.520677,162.231216 L148.978224,164.320744 L148.142413,162.503763 L152.684865,160.414235 Z M144.508451,164.175385 L145.344263,165.992366 L140.80181,168.081894 L139.965999,166.264913 L144.508451,164.175385 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy-3" d="M235.223819,142.071062 L233.042441,144.019083 L231.710272,142.527331 L233.89165,140.57931 L229.895142,136.104053 L245,132 L239.220327,146.546319 L235.223819,142.071062 Z M228.726768,145.19167 L230.058937,146.683422 L226.329557,150.013845 L224.997387,148.522093 L228.726768,145.19167 Z M222.013883,151.186432 L223.346052,152.678184 L219.616672,156.008608 L218.284502,154.516856 L222.013883,151.186432 Z M215.300998,157.181194 L216.633167,158.672947 L212.903787,162.00337 L211.571617,160.511618 L215.300998,157.181194 Z M208.588113,163.175957 L209.920282,164.667709 L206.190902,167.998133 L204.858732,166.50638 L208.588113,163.175957 Z M201.875228,169.170719 L203.207397,170.662471 L199.478017,173.992895 L198.145847,172.501143 L201.875228,169.170719 Z M195.162343,175.165482 L196.494512,176.657234 L192.765132,179.987657 L191.432962,178.495905 L195.162343,175.165482 Z M188.449458,181.160244 L189.781627,182.651996 L186.052247,185.98242 L184.720077,184.490667 L188.449458,181.160244 Z M181.736573,187.155006 L183.068742,188.646758 L179.339362,191.977182 L178.007193,190.48543 L181.736573,187.155006 Z M175.023688,193.149769 L176.355858,194.641521 L172.626477,197.971944 L171.294308,196.480192 L175.023688,193.149769 Z M168.310803,199.144531 L169.642973,200.636283 L165.913592,203.966707 L164.581423,202.474955 L168.310803,199.144531 Z M161.597918,205.139293 L162.930088,206.631046 L159.200707,209.961469 L157.868538,208.469717 L161.597918,205.139293 Z M154.885033,211.134056 L156.217203,212.625808 L152.487822,215.956231 L151.155653,214.464479 L154.885033,211.134056 Z M148.172148,217.128818 L149.504318,218.62057 L145.774937,221.950994 L144.442768,220.459242 L148.172148,217.128818 Z M141.459263,223.12358 L142.791433,224.615333 L139.062052,227.945756 L137.729883,226.454004 L141.459263,223.12358 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
6-data-storage/03-indexeddb/indexeddb-index@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 59 KiB

BIN
6-data-storage/03-indexeddb/indexeddb-structure.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 24 KiB

82
6-data-storage/03-indexeddb/indexeddb-structure.svg Normal file
View file

@ -0,0 +1,82 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="484px" height="267px" viewBox="0 0 484 267" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>indexeddb-structure.svg</title>
<desc>Created with sketchtool.</desc>
<g id="data-storage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="indexeddb-structure.svg">
<rect id="Rectangle-1-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="14" y="59" width="113" height="31"></rect>
<text id="key1:-value1" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="22" y="79">key1: value1</tspan>
</text>
<rect id="Rectangle-1-Copy-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="14" y="90" width="113" height="31"></rect>
<rect id="Rectangle-1-Copy-4" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="14" y="121" width="113" height="31"></rect>
<rect id="Rectangle-1-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="14" y="152" width="113" height="31"></rect>
<rect id="Rectangle-1-Copy-5" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="14" y="183" width="113" height="31"></rect>
<text id="Database" font-family="OpenSans-Regular, Open Sans" font-size="18" font-weight="normal" fill="#8A704D">
<tspan x="190" y="22">Database</tspan>
</text>
<text id="objectStore" font-family="OpenSans-Regular, Open Sans" font-size="18" font-weight="normal" fill="#8A704D">
<tspan x="18" y="53">objectStore</tspan>
</text>
<rect id="Rectangle-1-Copy-10" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="182" y="93" width="113" height="31"></rect>
<rect id="Rectangle-1-Copy-9" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="182" y="124" width="113" height="31"></rect>
<rect id="Rectangle-1-Copy-8" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="182" y="155" width="113" height="31"></rect>
<rect id="Rectangle-1-Copy-7" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="182" y="186" width="113" height="31"></rect>
<rect id="Rectangle-1-Copy-6" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="182" y="217" width="113" height="31"></rect>
<text id="objectStore" font-family="OpenSans-Regular, Open Sans" font-size="18" font-weight="normal" fill="#8A704D">
<tspan x="186" y="87">objectStore</tspan>
</text>
<rect id="Rectangle-1-Copy-15" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="348" y="63" width="113" height="31"></rect>
<rect id="Rectangle-1-Copy-14" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="348" y="94" width="113" height="31"></rect>
<rect id="Rectangle-1-Copy-13" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="348" y="125" width="113" height="31"></rect>
<text id="key3:-value3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="22" y="140">key3: value3</tspan>
</text>
<text id="key2:-value2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="22" y="111">key2: value2</tspan>
</text>
<text id="key4:-value4" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="22" y="171">key4: value4</tspan>
</text>
<text id="key5:-value5" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="22" y="202">key5: value5</tspan>
</text>
<rect id="Rectangle-1-Copy-12" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="348" y="156" width="113" height="31"></rect>
<rect id="Rectangle-1-Copy-11" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="348" y="187" width="113" height="31"></rect>
<text id="objectStore-Copy" font-family="OpenSans-Regular, Open Sans" font-size="18" font-weight="normal" fill="#8A704D">
<tspan x="352" y="57">objectStore</tspan>
</text>
<text id="key1:-value1" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="190" y="113">key1: value1</tspan>
</text>
<text id="key3:-value3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="190" y="174">key3: value3</tspan>
</text>
<text id="key2:-value2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="190" y="145">key2: value2</tspan>
</text>
<text id="key4:-value4" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="190" y="205">key4: value4</tspan>
</text>
<text id="key5:-value5" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="190" y="236">key5: value5</tspan>
</text>
<text id="key1:-value1" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="355" y="80">key1: value1</tspan>
</text>
<text id="key3:-value3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="355" y="143">key3: value3</tspan>
</text>
<text id="key2:-value2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="355" y="112">key2: value2</tspan>
</text>
<text id="key4:-value4" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="355" y="174">key4: value4</tspan>
</text>
<text id="key5:-value5" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="355" y="205">key5: value5</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
6-data-storage/03-indexeddb/indexeddb-structure@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 53 KiB