{"id":10552,"date":"2021-03-12T15:57:41","date_gmt":"2021-03-12T15:57:41","guid":{"rendered":"http:\/\/www.max-sperling.bplaced.net\/?p=10552"},"modified":"2024-04-08T14:57:52","modified_gmt":"2024-04-08T14:57:52","slug":"javascript-storage-and-web-worker","status":"publish","type":"post","link":"http:\/\/www.max-sperling.bplaced.net\/?p=10552","title":{"rendered":"Client-side storage (Web browser)"},"content":{"rendered":"

Overview<\/strong><\/p>\n

    \n
  1. User data<\/li>\n
      \n
    1. Cookies<\/li>\n
    2. Web Storage<\/li>\n
    3. IndexedDB<\/li>\n<\/ol>\n
    4. Cache<\/li>\n
        \n
      1. HTTP Cache<\/li>\n
      2. GPU Cache<\/li>\n
      3. Code Cache<\/li>\n<\/ol>\n<\/ol>\n
        \n

        1.1 Cookies<\/strong>
        \nThe data gets received from the server and then transferred with every request.<\/p>\n

          \n
        1. Initially (Without cookies)
          \nRequest<\/p>\n
          \r\nGET \/ HTTP\/1.1\r\nHost: www.example.org\r\n...\r\n<\/pre>\n
          Response<\/p>\n
          \r\nHTTP\/1.1 200 OK\r\n...\r\nSet-Cookie: sessionId=0123456789; Path=\/; Domain=example.com\r\n...\r\n<\/pre>\n<\/li>\n
        2. Afterward (With cookies)
          \nRequest<\/p>\n
          \r\nGET \/ HTTP\/1.1\r\nHost: www.example.org\r\n...\r\nCookies: sessionId=0123456789\r\n...\r\n<\/pre>\n
          Response<\/p>\n
          \r\nHTTP\/1.1 200 OK\r\n...\r\n<\/pre>\n<\/li>\n<\/ol>\n
          \n
          1.2 Web Storage (aka. DOM Storage)<\/strong>
          \nThe data gets created locally and isn’t transferred to the server with every request.<\/p>\n\n\n\n\n\n\n\n\n
          Type<\/th>\nLocal Storage<\/th>\nSession Storage<\/th>\n<\/tr>\n
          Data<\/th>\nKey-Value<\/td>\n<\/tr>\n
          Scope<\/th>\nOne origin 
           (across all windows and their tabs for one web browser instance)<\/td>\n          		One tab<\/td>\n<\/tr>\n
          Cleanup<\/th>\nExplicitly (e.g. by the code)<\/td>\nImplicitly (with closing the tab)<\/td>\n<\/tr>\n<\/table>\n
          The access happens synchronous and can only be done by the main thread.
          \n(Your UI will possibly freeze.)<\/p>\n
          \n
          1.3 IndexedDB<\/strong>
          \nSeems like the Local Storage, but is designed to store way more and even complex data.<\/p>\n
          The access happens asynchronous and can be done by the main thread and running web workers.
          \n(Your UI won’t freeze if done by a web worker, else it’s still possible.)<\/p>\n
          \n
          2.1 HTTP Cache<\/strong>
          \nThe cached data are HTTP object pairs (request\/response) for a better loading performance.<\/p>\n
          The specific behavior gets defined via the ‘Cache-Control’ label in the HTTP-Header:
          \n<\/p>\n
          Source: https:\/\/web.dev\/http-cache\/<\/a><\/p>\n
          \n
          2.2 GPU Cache<\/strong>
          \nThe cached data are shaders (set of instructions, executed at once for multiple pixels) for a better rendering performance.<\/p>\n
          \n
          2.3 Code Cache<\/strong>
          \nThe cached data are precompiled code (e.g. javascript in bytecode) for better execution performance.<\/p>\n","protected":false},"excerpt":{"rendered":"
          Overview User data Cookies Web Storage IndexedDB Cache HTTP Cache GPU Cache Code Cache 1.1 Cookies The data gets received<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false},"categories":[55],"tags":[],"_links":{"self":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts\/10552"}],"collection":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10552"}],"version-history":[{"count":3,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts\/10552\/revisions"}],"predecessor-version":[{"id":17325,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts\/10552\/revisions\/17325"}],"wp:attachment":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=10552"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=10552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}