<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        
        <title>
            <![CDATA[ storage - freeCodeCamp.org ]]>
        </title>
        <description>
            <![CDATA[ Browse thousands of programming tutorials written by experts. Learn Web Development, Data Science, DevOps, Security, and get developer career advice. ]]>
        </description>
        <link>https://www.freecodecamp.org/news/</link>
        <image>
            <url>https://cdn.freecodecamp.org/universal/favicons/favicon.png</url>
            <title>
                <![CDATA[ storage - freeCodeCamp.org ]]>
            </title>
            <link>https://www.freecodecamp.org/news/</link>
        </image>
        <generator>Eleventy</generator>
        <lastBuildDate>Tue, 30 Jun 2026 22:46:43 +0000</lastBuildDate>
        <atom:link href="https://www.freecodecamp.org/news/tag/storage/rss.xml" rel="self" type="application/rss+xml" />
        <ttl>60</ttl>
        
            <item>
                <title>
                    <![CDATA[ How to Build a Dropbox-like Distributed File Storage System Using MinIO and gRPC ]]>
                </title>
                <description>
                    <![CDATA[ In this tutorial, I’ll guide you through building a distributed file storage system inspired by Dropbox, using MinIO (an open-source, S3-compatible object storage server) and gRPC. The goal is to create a system that can store, replicate, and manage ... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-build-a-dropbox-like-distributed-file-storage-system-using-minio-and-grpc/</link>
                <guid isPermaLink="false">6733b4dc73da063aa0407447</guid>
                
                    <category>
                        <![CDATA[ #minio ]]>
                    </category>
                
                    <category>
                        <![CDATA[ gRPC ]]>
                    </category>
                
                    <category>
                        <![CDATA[ storage ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Docker ]]>
                    </category>
                
                    <category>
                        <![CDATA[ minio object storage ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Birkaran Sachdev ]]>
                </dc:creator>
                <pubDate>Tue, 12 Nov 2024 20:04:44 +0000</pubDate>
                <media:content url="https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/GWQ67jjUg9g/upload/e37080969188b807a15d6ebdaf813fa2.jpeg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>In this tutorial, I’ll guide you through building a <strong>distributed file storage system</strong> inspired by Dropbox, using MinIO (an open-source, S3-compatible object storage server) and gRPC. The goal is to create a system that can <strong>store, replicate, and manage files</strong> across multiple nodes, ensuring data availability and resilience.</p>
<p>We'll implement core features like file replication, metadata management, and versioning, all while demonstrating how to achieve eventual consistency in a distributed environment. By the end, you'll have a fully functional distributed file storage system that can handle high traffic, optimize storage, and ensure data integrity.</p>
<h3 id="heading-what-you-will-learn">What You Will Learn</h3>
<ul>
<li><p>How to set up <strong>MinIO</strong> for distributed object storage.</p>
</li>
<li><p>How to use <strong>gRPC</strong> for efficient client-server communication.</p>
</li>
<li><p>How to implement <strong>file replication</strong> and <strong>metadata management</strong>.</p>
</li>
<li><p>How to understand <strong>data consistency</strong> in a distributed system.</p>
</li>
<li><p>How to use <strong>Docker</strong> to deploy a scalable, distributed architecture.</p>
</li>
</ul>
<h3 id="heading-prerequisites">Prerequisites</h3>
<p>Before starting, ensure you have the following installed:</p>
<ul>
<li><p>Node.js (v14 or higher)</p>
</li>
<li><p>MinIO</p>
</li>
<li><p>gRPC and gRPC-tools</p>
</li>
<li><p>Docker</p>
</li>
</ul>
<p>You’ll also need to have a basic understanding of Node.js, object storage, and distributed systems.</p>
<h2 id="heading-table-of-contents">Table of Contents</h2>
<ul>
<li><p><a class="post-section-overview" href="#heading-project-overview">Project Overview</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-step-1-setting-up-the-project">Step 1: Setting Up the Project</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-step-2-setting-up-minio-distributed-storage-nodes">Step 2: Setting Up MinIO Distributed Storage Nodes</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-step-3-defining-the-grpc-protocol">Step 3: Defining the gRPC Protocol</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-step-4-implementing-the-grpc-server">Step 4: Implementing the gRPC Server</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-step-5-creating-the-client">Step 5: Creating the Client</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-step-6-running-the-system">Step 6: Running the System</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-conclusion-what-youve-learned">Conclusion: What You’ve Learned</a></p>
</li>
</ul>
<h2 id="heading-project-overview">Project Overview</h2>
<p>We'll build a <strong>distributed file storage system</strong> where:</p>
<ol>
<li><p>Users can upload and download files.</p>
</li>
<li><p>Files are replicated across multiple storage nodes to ensure high availability.</p>
</li>
<li><p>Metadata (like file names, upload times, and versions) is managed centrally.</p>
</li>
<li><p>The system handles <strong>eventual consistency</strong> by syncing file updates across nodes.</p>
</li>
</ol>
<h3 id="heading-system-architecture">System Architecture</h3>
<p>Our system will consist of:</p>
<ol>
<li><p><strong>gRPC Server</strong>: Manages file uploads, downloads, and metadata.</p>
</li>
<li><p><strong>MinIO Distributed Storage Nodes</strong>: Handles object storage and replication.</p>
</li>
<li><p><strong>Client Interface</strong>: Allows users to interact with the system via HTTP.</p>
</li>
</ol>
<h2 id="heading-step-1-setting-up-the-project">Step 1: Setting Up the Project</h2>
<p>Create a new directory for the project and initialize a Node.js application:</p>
<pre><code class="lang-javascript">mkdir distributed-file-storage
cd distributed-file-storage
npm init -y
</code></pre>
<p>Now, install the necessary dependencies:</p>
<pre><code class="lang-javascript">npm install grpc @grpc/grpc-js @grpc/proto-loader express multer dotenv minio
</code></pre>
<ul>
<li><p><strong>grpc</strong>: For building gRPC server and client.</p>
</li>
<li><p><strong>@grpc/proto-loader</strong>: Loads gRPC protocol files.</p>
</li>
<li><p><strong>express</strong>: For the client-side HTTP server.</p>
</li>
<li><p><strong>multer</strong>: For handling file uploads.</p>
</li>
<li><p><strong>dotenv</strong>: For managing environment variables.</p>
</li>
<li><p><strong>minio</strong>: MinIO client for interacting with storage nodes.</p>
</li>
</ul>
<p>Create a <strong>.env</strong> file with the following content:</p>
<pre><code class="lang-javascript">MINIO_ENDPOINT_1=localhost:<span class="hljs-number">9001</span>
MINIO_ACCESS_KEY=minioadmin
MINIO_SECRET_KEY=minioadmin
PORT=<span class="hljs-number">5000</span>
</code></pre>
<h2 id="heading-step-2-setting-up-minio-distributed-storage-nodes">Step 2: Setting Up MinIO Distributed Storage Nodes</h2>
<p>We'll use <strong>Docker</strong> to run multiple MinIO instances, simulating a distributed environment. Run the following commands to set up three MinIO containers:</p>
<pre><code class="lang-javascript">docker run -p <span class="hljs-number">9001</span>:<span class="hljs-number">9000</span> --name minio1 -e <span class="hljs-string">"MINIO_ACCESS_KEY=minioadmin"</span> -e <span class="hljs-string">"MINIO_SECRET_KEY=minioadmin"</span> -d minio/minio server /data
docker run -p <span class="hljs-number">9002</span>:<span class="hljs-number">9000</span> --name minio2 -e <span class="hljs-string">"MINIO_ACCESS_KEY=minioadmin"</span> -e <span class="hljs-string">"MINIO_SECRET_KEY=minioadmin"</span> -d minio/minio server /data
docker run -p <span class="hljs-number">9003</span>:<span class="hljs-number">9000</span> --name minio3 -e <span class="hljs-string">"MINIO_ACCESS_KEY=minioadmin"</span> -e <span class="hljs-string">"MINIO_SECRET_KEY=minioadmin"</span> -d minio/minio server /data
</code></pre>
<p>These commands will start three MinIO nodes, each listening on a different port.</p>
<h2 id="heading-step-3-defining-the-grpc-protocol">Step 3: Defining the gRPC Protocol</h2>
<p>Create a new folder named <strong>protos</strong> and inside it, create a file called <strong>storage.proto</strong>:</p>
<pre><code class="lang-javascript">syntax = <span class="hljs-string">"proto3"</span>;

service FileStorage {
  rpc UploadFile(stream FileRequest) returns (UploadResponse);
  rpc DownloadFile(FileDownloadRequest) returns (stream FileResponse);
  rpc GetMetadata(FileMetadataRequest) returns (MetadataResponse);
}

message FileRequest {
  bytes fileData = <span class="hljs-number">1</span>;
  string fileName = <span class="hljs-number">2</span>;
}

message UploadResponse {
  string message = <span class="hljs-number">1</span>;
}

message FileDownloadRequest {
  string fileName = <span class="hljs-number">1</span>;
}

message FileResponse {
  bytes fileData = <span class="hljs-number">1</span>;
}

message FileMetadataRequest {
  string fileName = <span class="hljs-number">1</span>;
}

message MetadataResponse {
  string fileName = <span class="hljs-number">1</span>;
  string uploadTime = <span class="hljs-number">2</span>;
  string version = <span class="hljs-number">3</span>;
}
</code></pre>
<ul>
<li><p><strong>UploadFile</strong>: Streams file data from the client to the server.</p>
</li>
<li><p><strong>DownloadFile</strong>: Streams file data from the server to the client.</p>
</li>
<li><p><strong>GetMetadata</strong>: Retrieves metadata like file name, upload time, and version.</p>
</li>
</ul>
<h2 id="heading-step-4-implementing-the-grpc-server">Step 4: Implementing the gRPC Server</h2>
<p>Create a file called <strong>server.js</strong>:</p>
<pre><code class="lang-javascript"><span class="hljs-built_in">require</span>(<span class="hljs-string">'dotenv'</span>).config();
<span class="hljs-keyword">const</span> grpc = <span class="hljs-built_in">require</span>(<span class="hljs-string">'@grpc/grpc-js'</span>);
<span class="hljs-keyword">const</span> protoLoader = <span class="hljs-built_in">require</span>(<span class="hljs-string">'@grpc/proto-loader'</span>);
<span class="hljs-keyword">const</span> Minio = <span class="hljs-built_in">require</span>(<span class="hljs-string">'minio'</span>);
<span class="hljs-keyword">const</span> fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">'fs'</span>);
<span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>);

<span class="hljs-keyword">const</span> packageDefinition = protoLoader.loadSync(<span class="hljs-string">'protos/storage.proto'</span>);
<span class="hljs-keyword">const</span> storageProto = grpc.loadPackageDefinition(packageDefinition).FileStorage;

<span class="hljs-comment">// Set up MinIO clients for each node</span>
<span class="hljs-keyword">const</span> minioClients = [
  <span class="hljs-keyword">new</span> Minio.Client({
    <span class="hljs-attr">endPoint</span>: process.env.MINIO_ENDPOINT_1.split(<span class="hljs-string">':'</span>)[<span class="hljs-number">0</span>],
    <span class="hljs-attr">port</span>: <span class="hljs-built_in">parseInt</span>(process.env.MINIO_ENDPOINT_1.split(<span class="hljs-string">':'</span>)[<span class="hljs-number">1</span>]),
    <span class="hljs-attr">accessKey</span>: process.env.MINIO_ACCESS_KEY,
    <span class="hljs-attr">secretKey</span>: process.env.MINIO_SECRET_KEY,
    <span class="hljs-attr">useSSL</span>: <span class="hljs-literal">false</span>,
  })
];

<span class="hljs-comment">// Upload file to MinIO</span>
<span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">uploadFile</span>(<span class="hljs-params">call, callback</span>) </span>{
  <span class="hljs-keyword">const</span> chunks = [];
  call.on(<span class="hljs-string">'data'</span>, <span class="hljs-function">(<span class="hljs-params">chunk</span>) =&gt;</span> chunks.push(chunk.fileData));
  call.on(<span class="hljs-string">'end'</span>, <span class="hljs-keyword">async</span> () =&gt; {
    <span class="hljs-keyword">const</span> buffer = Buffer.concat(chunks);
    <span class="hljs-keyword">const</span> fileName = call.metadata.get(<span class="hljs-string">'fileName'</span>)[<span class="hljs-number">0</span>];

    <span class="hljs-comment">// Store file in MinIO</span>
    <span class="hljs-keyword">const</span> client = minioClients[<span class="hljs-number">0</span>];
    <span class="hljs-keyword">await</span> client.putObject(<span class="hljs-string">'files'</span>, fileName, buffer);
    callback(<span class="hljs-literal">null</span>, { <span class="hljs-attr">message</span>: <span class="hljs-string">`File <span class="hljs-subst">${fileName}</span> uploaded successfully`</span> });
  });
}

<span class="hljs-comment">// Download file from MinIO</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">downloadFile</span>(<span class="hljs-params">call</span>) </span>{
  <span class="hljs-keyword">const</span> { fileName } = call.request;
  <span class="hljs-keyword">const</span> client = minioClients[<span class="hljs-number">0</span>];

  client.getObject(<span class="hljs-string">'files'</span>, fileName, <span class="hljs-function">(<span class="hljs-params">err, stream</span>) =&gt;</span> {
    <span class="hljs-keyword">if</span> (err) <span class="hljs-keyword">return</span> call.emit(<span class="hljs-string">'error'</span>, err);
    stream.on(<span class="hljs-string">'data'</span>, <span class="hljs-function">(<span class="hljs-params">chunk</span>) =&gt;</span> call.write({ <span class="hljs-attr">fileData</span>: chunk }));
    stream.on(<span class="hljs-string">'end'</span>, <span class="hljs-function">() =&gt;</span> call.end());
  });
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">main</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">const</span> server = <span class="hljs-keyword">new</span> grpc.Server();
  server.addService(storageProto.FileStorage.service, { uploadFile, downloadFile });
  server.bindAsync(<span class="hljs-string">'0.0.0.0:5000'</span>, grpc.ServerCredentials.createInsecure(), <span class="hljs-function">() =&gt;</span> {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'gRPC server running on port 5000'</span>);
    server.start();
  });
}

main();
</code></pre>
<p>Here’s what’s going on in this code:</p>
<ol>
<li><p><strong>uploadFile</strong>: Handles file uploads by streaming data to the server and storing it in MinIO.</p>
</li>
<li><p><strong>downloadFile</strong>: Streams the requested file back to the client from MinIO.</p>
</li>
<li><p><strong>MinIO Clients</strong>: We set up multiple MinIO clients to handle distributed storage.</p>
</li>
</ol>
<h2 id="heading-step-5-creating-the-client">Step 5: Creating the Client</h2>
<p>Create a file named <strong>client.js</strong>:</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">const</span> grpc = <span class="hljs-built_in">require</span>(<span class="hljs-string">'@grpc/grpc-js'</span>);
<span class="hljs-keyword">const</span> protoLoader = <span class="hljs-built_in">require</span>(<span class="hljs-string">'@grpc/proto-loader'</span>);
<span class="hljs-keyword">const</span> fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">'fs'</span>);

<span class="hljs-keyword">const</span> packageDefinition = protoLoader.loadSync(<span class="hljs-string">'protos/storage.proto'</span>);
<span class="hljs-keyword">const</span> storageProto = grpc.loadPackageDefinition(packageDefinition).FileStorage;
<span class="hljs-keyword">const</span> client = <span class="hljs-keyword">new</span> storageProto(<span class="hljs-string">'localhost:5000'</span>, grpc.credentials.createInsecure());

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">uploadFile</span>(<span class="hljs-params">filePath</span>) </span>{
  <span class="hljs-keyword">const</span> call = client.uploadFile();
  <span class="hljs-keyword">const</span> fileName = filePath.split(<span class="hljs-string">'/'</span>).pop();
  <span class="hljs-keyword">const</span> stream = fs.createReadStream(filePath);

  stream.on(<span class="hljs-string">'data'</span>, <span class="hljs-function">(<span class="hljs-params">chunk</span>) =&gt;</span> call.write({ <span class="hljs-attr">fileData</span>: chunk }));
  stream.on(<span class="hljs-string">'end'</span>, <span class="hljs-function">() =&gt;</span> call.end());
  call.on(<span class="hljs-string">'data'</span>, <span class="hljs-function">(<span class="hljs-params">response</span>) =&gt;</span> <span class="hljs-built_in">console</span>.log(response.message));
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">downloadFile</span>(<span class="hljs-params">fileName</span>) </span>{
  <span class="hljs-keyword">const</span> call = client.downloadFile({ fileName });
  <span class="hljs-keyword">const</span> writeStream = fs.createWriteStream(<span class="hljs-string">`downloaded_<span class="hljs-subst">${fileName}</span>`</span>);

  call.on(<span class="hljs-string">'data'</span>, <span class="hljs-function">(<span class="hljs-params">chunk</span>) =&gt;</span> writeStream.write(chunk.fileData));
  call.on(<span class="hljs-string">'end'</span>, <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`Downloaded <span class="hljs-subst">${fileName}</span>`</span>));
}

uploadFile(<span class="hljs-string">'test.txt'</span>);  <span class="hljs-comment">// Example usage</span>
</code></pre>
<h2 id="heading-step-6-running-the-system">Step 6: Running the System</h2>
<ol>
<li><p><strong>Start the gRPC Server</strong>:</p>
<pre><code class="lang-javascript"> node server.js
</code></pre>
</li>
<li><p><strong>Run the Client</strong>:</p>
<pre><code class="lang-javascript"> node client.js
</code></pre>
</li>
</ol>
<h2 id="heading-conclusion-what-youve-learned">Conclusion: What You’ve Learned</h2>
<p>Congratulations! You've built a distributed file storage system using <strong>MinIO</strong> and <strong>gRPC</strong>. In this tutorial, you learned how to:</p>
<ol>
<li><p>Set up a <strong>distributed object storage</strong> system using MinIO.</p>
</li>
<li><p>Use <strong>gRPC</strong> to handle file uploads, downloads, and metadata management.</p>
</li>
<li><p>Implement <strong>file replication</strong> and <strong>eventual consistency</strong> across multiple nodes.</p>
</li>
<li><p>Utilize <strong>Docker</strong> to simulate a scalable distributed environment.</p>
</li>
</ol>
<h3 id="heading-next-steps">Next Steps:</h3>
<ol>
<li><p><strong>Add File Versioning</strong>: Store multiple versions of files for rollback.</p>
</li>
<li><p><strong>Implement Authentication</strong>: Secure your gRPC endpoints with JWT.</p>
</li>
<li><p><strong>Deploy with Kubernetes</strong>: Scale your system across multiple nodes for high availability.</p>
</li>
</ol>
<p>Happy coding!</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to Use LocalStorage in JavaScript ]]>
                </title>
                <description>
                    <![CDATA[ In modern web development, having a way to persist data helps developers improve performance and create a better user experience. And using local storage is an effective way of persisting data in an application. In this article, you will learn what l... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/use-local-storage-in-modern-applications/</link>
                <guid isPermaLink="false">66d45dedc7632f8bfbf1e417</guid>
                
                    <category>
                        <![CDATA[ JavaScript ]]>
                    </category>
                
                    <category>
                        <![CDATA[ localstorage ]]>
                    </category>
                
                    <category>
                        <![CDATA[ storage ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Web Development ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Benjamin Semah ]]>
                </dc:creator>
                <pubDate>Tue, 20 Feb 2024 21:37:46 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2024/02/JavaScript-localStorage-freeCodeCamp-Benjamin-Semah.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>In modern web development, having a way to persist data helps developers improve performance and create a better user experience. And using local storage is an effective way of persisting data in an application.</p>
<p>In this article, you will learn what local storage is and how to use it in modern web applications. You will also learn the advantages of using local storage, as well as some of its limitations.</p>
<h2 id="heading-table-of-contents">Table of Contents</h2>
<ul>
<li><p><a class="post-section-overview" href="#what-is-local-storage">What is Local Storage?</a></p>
</li>
<li><p><a class="post-section-overview" href="#differences-between-local-storage-and-session-storage">Differences Between Local Storage and Session Storage</a></p>
</li>
<li><p><a class="post-section-overview" href="#how-to-use-local-storage">How to Use Local Storage</a></p>
</li>
<li><p><a class="post-section-overview" href="#a-practical-example">A Practical Example</a></p>
</li>
<li><p><a class="post-section-overview" href="#how-to-view-local-storage-in-devtools">How to View Local Storage in DevTools</a></p>
</li>
<li><p><a class="post-section-overview" href="#benefits-of-using-local-storage">Benefits of Using Local Storage</a></p>
</li>
<li><p><a class="post-section-overview" href="#limitations-of-using-local-storage">Limitations of Local Storage</a></p>
</li>
<li><p><a class="post-section-overview" href="#conclusion">Conclusion</a></p>
</li>
</ul>
<h2 id="heading-what-is-local-storage">What is Local Storage?</h2>
<p>Local storage is a feature in web browsers that allows developers to save data in the user’s browser. It’s part of the web storage API, together with session storage.</p>
<p>Local storage works by accepting data in key-value pairs. It retains the data even when the user refreshes the page or closes the tab or browser.</p>
<h2 id="heading-differences-between-local-storage-and-session-storage">Differences Between Local Storage and Session Storage</h2>
<p>As I mentioned earlier, the web storage API in modern browsers provides two main features for data storage. These are local storage and session storage.</p>
<p>The key differences between the two are the lifespan of the stored data and their scope.</p>
<p>Data in local storage remains available even when the tab/browser is closed. But closing the tab/browser clears any data stored in session storage.</p>
<p>Also, data in local storage is accessible across multiple browser tabs and windows. On the other hand, data in session storage is only accessible within specific browser tabs and is not shared.</p>
<h2 id="heading-how-to-use-local-storage">How to Use Local Storage</h2>
<p>The local storage object provides different methods you can use to interact with it. With these methods, you can add, read, and delete data from local storage.</p>
<h3 id="heading-how-to-store-data-in-local-storage">How to Store Data in Local Storage</h3>
<p>To store data in local storage, you use the <code>setItem()</code> method. This method takes in two arguments, a key and a value.</p>
<pre><code class="lang-javascript"><span class="hljs-built_in">localStorage</span>.setItem(key, value)
</code></pre>
<p>If the key does not exist in local storage, the <code>setItem()</code> method will create a new key and assign the given value to it. But if a key with the same name exists in local storage, it will update the value of the key with the provided value.</p>
<h3 id="heading-how-to-read-data-from-local-storage">How to Read Data From Local Storage</h3>
<p>To retrieve and use data from local storage, you use the <code>getItem()</code> method. This method takes in a key as an argument.</p>
<pre><code class="lang-javascript"><span class="hljs-built_in">localStorage</span>.getItem(key)
</code></pre>
<p>If the given key exists in local storage, the method returns the value of that key. If it doesn’t, the method returns <code>null</code>.</p>
<h3 id="heading-how-to-store-and-read-complex-data-values-in-local-storage">How to Store and Read Complex Data Values in Local Storage</h3>
<p>Local storage can only store strings. This means if you need to store values like objects or arrays, you first need to get a string representation of the value. You do this using the <code>JSON.stringify()</code> method.</p>
<p>Example:</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">const</span> userObj = {
  username = <span class="hljs-string">"Maria"</span>,
  <span class="hljs-attr">email</span>: <span class="hljs-string">"maria@mail.com"</span>
}

<span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">'user'</span>, <span class="hljs-built_in">JSON</span>.stringify(userObj))
</code></pre>
<p>The <code>JSON.stringify()</code> method converts the <code>userObj</code> object into a string representation before sending it to local storage.</p>
<p>Now, when you want to retrieve the data back from local storage, you also need to change it from its string representation back to the original form. And you do that using the <code>JSON.parse()</code> method.</p>
<p>Example:</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">const</span> storedUserData = <span class="hljs-built_in">localStorage</span>.getItem(<span class="hljs-string">'user'</span>)

<span class="hljs-keyword">if</span> (storedUserData) {
  <span class="hljs-keyword">const</span> userData = <span class="hljs-built_in">JSON</span>.parse(storedUserData)
  <span class="hljs-comment">// You can use userData here...</span>
} <span class="hljs-keyword">else</span> {
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'User data not found in local storage'</span>)
}
</code></pre>
<p>In the example above, we first check if there is data for ‘user’ in local storage before using the <code>JSON.parse()</code> method. This is important because if it does not exist in local storage, <code>JSON.parse()</code> will be applied to a <code>null</code> value (which will result in an error).</p>
<h3 id="heading-how-to-delete-data-from-local-storage">How to Delete Data from Local Storage</h3>
<p>There are two methods available for deleting data from local storage. One is the <code>removeItem()</code> method and the other is the <code>clear()</code> method.</p>
<p>You use the <code>removeItem()</code> method when you want to delete a single item from local storage. The method takes in a key as an argument and deletes the corresponding key-value pair from local storage.</p>
<pre><code class="lang-javascript"><span class="hljs-built_in">localStorage</span>.removeItem(key)
</code></pre>
<p>But what if, instead of deleting a single key-value pair, you want to clear all data from the local storage? Well, local storage has a method for that - the <code>clear()</code> method.</p>
<pre><code class="lang-javascript"><span class="hljs-built_in">localStorage</span>.clear()
</code></pre>
<p>The <code>clear()</code> method deletes all key-value pairs in the local storage for the current domain.</p>
<h3 id="heading-how-to-get-the-name-of-a-key-in-local-storage">How to Get the Name of a Key in Local Storage</h3>
<p>If you want to get the name of a key at a particular index in local storage, you can use the <code>key()</code> method. It takes in a number as an argument and returns the name of the key at that specified index.</p>
<p>Example:</p>
<pre><code class="lang-javascript"><span class="hljs-built_in">localStorage</span>.key(<span class="hljs-number">0</span>)
</code></pre>
<p>The example above will return the name of the key at index 0. If there is no key at the specified index, the method will return null.</p>
<h2 id="heading-a-practical-example">A Practical Example</h2>
<p>The following shows a practical demo of the difference between local storage and session storage.</p>
<p>In this example, we'll save the user's name in local storage and save the age in session storage.</p>
<pre><code class="lang-html"><span class="hljs-comment">&lt;!-- HTML --&gt;</span> 
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"userName"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"userAge"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"name"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter name here"</span>/&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"saveNameBtn"</span>&gt;</span>Save Name<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"age"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter age here"</span>/&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"saveAgeBtn"</span>&gt;</span>Save Age<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>

<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
</code></pre>
<p>The markup includes two header elements. One for <code>userName</code> and the other for <code>userAge</code>. It also includes two input elements for name and age. Each input has an associated button we'll use for saving the data.</p>
<p>Now, let's use the <code>querySelector</code> method to select the various elements.</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">const</span> userNameText = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">".userName"</span>)
<span class="hljs-keyword">const</span> userAgeText = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">".userAge"</span>)

<span class="hljs-keyword">const</span> saveNameButton = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">".saveNameBtn"</span>)
<span class="hljs-keyword">const</span> saveAgeButton = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">".saveAgeBtn"</span>)
</code></pre>
<h3 id="heading-code-example-for-local-storage">Code Example for Local Storage</h3>
<pre><code class="lang-javascript">saveNameButton.addEventListener(<span class="hljs-string">"click"</span>, <span class="hljs-function">() =&gt;</span> {
  <span class="hljs-keyword">const</span> userName = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">".name"</span>).value
  userNameText.textContent = userName
  <span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">"name"</span>, userName)
})
</code></pre>
<p>First, we get the value of the name input, set it as the <code>textContent</code> of <code>userNameText</code>. And then use the <code>setItem()</code> of local storage to save the <code>userName</code> value in local storage.</p>
<p>Next, let's see how we can get the name value from local storage when we need it.</p>
<pre><code class="lang-javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">displayUserName</span> (<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">const</span> nameFromLocalStorage = <span class="hljs-built_in">localStorage</span>.getItem(<span class="hljs-string">"name"</span>)

  <span class="hljs-keyword">if</span> (nameFromLocalStorage) {
    userNameText.textContent = nameFromLocalStorage
  } <span class="hljs-keyword">else</span> {
    userNameText.textContent = <span class="hljs-string">"No name data in local storage"</span>
  }
}

displayUserName()
</code></pre>
<p>The <code>displayUserName</code> function gets <code>nameFromLocalStorage</code> using the <code>getItem()</code> method. If the value exists in local storage, we set it as the <code>textContent</code> of the <code>userNameText</code> element. If it's <code>null</code> or doesn't exist, then we set <code>textContent</code> to the string <em>"No name data in local storage"</em>.</p>
<h3 id="heading-code-example-for-session-storage">Code Example for Session Storage</h3>
<p>Now, let's do the same thing for the <code>age</code> value. The only difference here will be using session storage instead of local storage.</p>
<pre><code class="lang-javascript">
saveAgeButton.addEventListener(<span class="hljs-string">"click"</span>, <span class="hljs-function">() =&gt;</span> {
  <span class="hljs-keyword">const</span> userAge = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">".age"</span>).value
  userAgeText.textContent = userAge
  sessionStorage.setItem(<span class="hljs-string">"age"</span>, userAge)
})

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">displayUserAge</span> (<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">const</span> ageFromSessionStorage = sessionStorage.getItem(<span class="hljs-string">"age"</span>)

  <span class="hljs-keyword">if</span> (ageFromSessionStorage) {
    userAgeText.textContent = ageFromSessionStorage
  } <span class="hljs-keyword">else</span> {
    userAgeText.textContent = <span class="hljs-string">"No age data in session storage"</span>
  }
}

displayUserAge()
</code></pre>
<p>The <code>setItem</code> and <code>getItem</code> methods also works for session storage.</p>
<h3 id="heading-demo">Demo:</h3>
<p><img src="https://www.freecodecamp.org/news/content/images/2024/02/demo.gif" alt="Image" width="600" height="400" loading="lazy"></p>
<p><em>Local storage and session storage demo.</em></p>
<p>As you can see from the demo above, when you close and reopen the page, the <code>name</code> data from local storage persists. But the <code>age</code> data from session storage is cleared once the page closes.</p>
<p><a target="_blank" href="https://stackblitz.com/edit/vitejs-vite-hb86sa?file=index.html,main.js&amp;terminal=dev">Try your hands on the code sample on StackBlitz</a></p>
<h2 id="heading-how-to-view-local-storage-in-devtools">How to View Local Storage in DevTools</h2>
<p>You can follow the steps below to inspect the contents of local storage in your browser's developer tools.</p>
<p>First, open DevTools. You can do that by right clicking on the web page and selecting "Inspect".</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2024/02/STEP-ONE.gif" alt="Image" width="600" height="400" loading="lazy"></p>
<p><em>Demo of how to open the DevTools.</em></p>
<p>Then, select the "Application" tab on the DevTools panel. Depending on your browser, this panel may have a different name. For example, it's called "Storage" in Safari and Firefox.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2024/02/STEP-TWO.gif" alt="Image" width="600" height="400" loading="lazy"></p>
<p><em>Demo of how to open the "Application" panel in DevTools.</em></p>
<p>Locate the "Storage" section on the sidebar showing a list of the various web storage options.</p>
<p>Click on "Local Storage" to expand and view its contents.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2024/02/STEP-THREE.gif" alt="Image" width="600" height="400" loading="lazy"></p>
<p><em>Demo of how to open the local storage tab in the storage panel.</em></p>
<p>You can click on individual items to view the corresponding key-value pair.</p>
<h2 id="heading-benefits-of-using-local-storage">Benefits of Using Local Storage</h2>
<p>The following are some of the benefits local storage has over other storage mechanisms in modern web development.</p>
<ol>
<li><p><strong>Persistent data:</strong> When you use local storage, the stored data remains even when the user closes the tab or the browser. This is useful for saving user preferences, settings, and other relevant data. It can help create a seamless user experience.</p>
</li>
<li><p><strong>Offline access:</strong> You can use local storage as a means to cache data which can be accessed even with limited or no internet. This makes it a useful feature for apps that rely on caching data for offline use like news readers, productivity apps, and so on.</p>
</li>
<li><p><strong>More storage capacity:</strong> Compared to other storage means, local storage has a relatively high capacity. For example, cookies are limited to 4 kilobytes per domain. But local storage can store up to 5 megabytes of data per domain.</p>
</li>
</ol>
<h2 id="heading-limitations-of-using-local-storage">Limitations of Using Local Storage</h2>
<ol>
<li><p><strong>Stores only strings:</strong> As you learned earlier, local storage can only store string values. You can use the JSON <code>stringify</code> and <code>parse</code> methods to work around it. But some web developers may not prefer it as it can lead to writing complex code that’s difficult to debug.</p>
</li>
<li><p><strong>Security concerns:</strong> Data in the local storage can be prone to attacks like cross-site scripting (XSS). As such, you should be cautious when working with sensitive information. It’s advisable to assess security implications and consider other alternatives where necessary.</p>
</li>
<li><p><strong>Not accessible to web workers:</strong> Local storage is part of the Window object. As such, it’s tied to the main execution thread of the web page. This means it's not accessible to web workers. So if you run any background processes, you cannot use local storage within the web worker scripts.</p>
</li>
</ol>
<h2 id="heading-conclusion">Conclusion</h2>
<p>Local storage is a feature in modern web browsers that makes it easy for web developers to store and persist data between browser sessions.</p>
<p>Compared to traditional cookies, it provides larger storage capacities. Also, unlike cookies, it does not rely on server-side processes. This reduces the need for frequent server requests and helps improve performance.</p>
<p>In this article, you learn about how to use local storage. We covered saving, retrieving, and deleting data from local storage. You also learned about some of the benefits of using local storage in your project, and some of its limitations too.</p>
<p>Thanks for reading. And happy coding! For more in-depth tutorials, feel free to <a target="_blank" href="https://www.youtube.com/@DevAfterHours">subscribe to my YouTube channel</a>.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How Master Boot Record Disk Partitioning Works in Linux ]]>
                </title>
                <description>
                    <![CDATA[ Efficient storage management is a crucial aspect of maintaining a well-organized computing environment. In this detailed guide, we'll explore the features of Master Boot Record (MBR) disk partitioning using the parted command on Linux. Additionally, ... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-mbr-works-in-linux/</link>
                <guid isPermaLink="false">66d45f67d14641365a0508f5</guid>
                
                    <category>
                        <![CDATA[ Linux ]]>
                    </category>
                
                    <category>
                        <![CDATA[ storage ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Kedar Makode ]]>
                </dc:creator>
                <pubDate>Wed, 07 Feb 2024 10:29:26 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2024/02/Frame-1000004568-1.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Efficient storage management is a crucial aspect of maintaining a well-organized computing environment.</p>
<p>In this detailed guide, we'll explore the features of Master Boot Record (MBR) disk partitioning using the <code>parted</code> command on Linux.</p>
<p>Additionally, we'll cover the process of adding a new hard disk in VMware, as well as how to format and mount a newly created partition using <code>mkfs</code> and <code>fstab</code>, respectively.</p>
<h2 id="heading-table-of-contents"><strong>Table Of Contents</strong></h2>
<p>Here's what we'll cover in this comprehensive guide:</p>
<ul>
<li><p><a class="post-section-overview" href="#heading-overview-of-mbr">Overview of MBR</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-introduction-to-the-parted-utility">Introduction to Parted Utility</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-how-to-identify-disks">How to Identify Disks</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-how-to-launch-parted">How to Launch Parted</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-how-to-create-a-new-mbr-partition-table">How to Create a New MBR Partition Table</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-how-to-create-primary-partitions">How to Create Primary Partitions</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-how-to-display-partition-information">How to Display Partition Information</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-how-to-format-the-partition-with-mkfs">How to Format the Partition with mkfs</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-how-to-automate-mounting-with-fstab">How to Automate Mounting with fstab</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-how-to-mount-a-partition">How to Mount a Partition</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-how-to-create-logical-partitions">How to Create Logical Partitions</a></p>
</li>
<li><p><a class="post-section-overview" href="#heading-wrapping-up">Wrapping Up</a></p>
</li>
</ul>
<h2 id="heading-overview-of-mbr">Overview of MBR</h2>
<p>MBR is a legacy partitioning scheme used on BIOS-based systems, with a 512-byte sector at the beginning of the storage device which contains partition information and the bootloader.</p>
<p>The 512 bytes of the MBR are organized as follows:</p>
<ul>
<li><p><strong>Master Boot Code (446 bytes):</strong> This section contains the executable code responsible for loading the operating system. It locates the active (bootable) partition and passes control to its boot sector.</p>
</li>
<li><p><strong>Partition Table (64 bytes):</strong> The next 64 bytes are reserved for the partition table, which can describe up to four primary partitions or three primary partitions and one extended partition.</p>
</li>
<li><p><strong>MBR Signature (2 bytes):</strong> The last two bytes contain a signature (0x55AA), indicating that this is a valid MBR.</p>
</li>
</ul>
<h2 id="heading-introduction-to-the-parted-utility">Introduction to the Parted Utility</h2>
<p><code>parted</code> is a command-line utility designed for creating, resizing, and managing disk partitions on Linux systems.</p>
<p>It offers a comprehensive set of features for handling disk-related tasks and is widely used due to its flexibility and robust capabilities. The primary goals of <code>parted</code> include:</p>
<ul>
<li><p><strong>Partition Creation and Resizing:</strong> <code>parted</code> enables users to create new partitions on a disk, resize existing partitions, and adjust the allocation of disk space.</p>
</li>
<li><p><strong>File System Support:</strong> It supports various file systems, including ext2, ext3, ext4, FAT, NTFS, and more, allowing users to choose the file system that best suits their needs.</p>
</li>
<li><p><strong>Partition Table Manipulation:</strong> <code>parted</code> facilitates the management of partition tables, including creating, modifying, and deleting partitions within these tables.</p>
</li>
<li><p><strong>Sector-level Operations:</strong> The utility operates at the sector level, allowing for precise control and manipulation of disk structures.</p>
</li>
</ul>
<h3 id="heading-how-to-install-parted">How to Install Parted</h3>
<p>You can install <code>parted</code> on your system using this command:</p>
<pre><code class="lang-bash">yum install parted
</code></pre>
<p>Before creating partition we need to add new disk to our virtual machine. I am using VMware. Go on and start RHEL virtual machine.</p>
<p>First we need to go to Player option on top left corner and then to the Manage option. Using that option, you can select virtual machine settings.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2024/01/Screenshot--2-.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p><em>Add new hard disk in VMware</em></p>
<p>Click on "add to new hard disk". Then select hard disk and keep pressing on next until it asks for disk capacity. For learning purposes, add only 5 GB disk.</p>
<p>Continue clicking next until you get to the finish option.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2024/01/Screenshot--3--1.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p><em>Adding virtual hard disk - 1</em></p>
<p><img src="https://www.freecodecamp.org/news/content/images/2024/01/Screenshot--4--1.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p><em>Adding virtual hard disk - 2</em></p>
<p><img src="https://www.freecodecamp.org/news/content/images/2024/01/Screenshot--5-.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p><em>Adding virtual hard disk - 3</em></p>
<p>We are focusing on creating partition, so we'll not focus on parts which are not needed for partition.</p>
<p>Next, restart your virtual machine to reflect the newly added hard disk.</p>
<h3 id="heading-how-to-identify-disks">How to Identify Disks</h3>
<p>Identifying disks is a crucial step in the process of disk partitioning as it ensures that you are working with the correct storage device on your system.</p>
<p>Use the <code>lsblk</code> command to display information about block devices, including hard drives and partitions.</p>
<pre><code class="lang-bash">lsblk
</code></pre>
<p>Look for the disk you want to partition. Disk names are typically in the format <code>/dev/sdX</code>, where 'X' is a lowercase letter representing the disk. For example, <code>/dev/sda</code>, <code>/dev/sdb</code>, etc.</p>
<h3 id="heading-how-to-launch-parted">How to Launch Parted</h3>
<p>Open a terminal and launch <code>parted</code> for the target disk:</p>
<pre><code class="lang-bash">parted /dev/sdX
</code></pre>
<p>This initiates the <code>parted</code> utility with elevated privileges and directs it to focus on the specified storage device (<code>/dev/sdX</code>).</p>
<p>Once executed, the user enters the <code>parted</code> interactive mode for the specified device, enabling the configuration and management of partitions on that particular storage device.</p>
<h3 id="heading-how-to-create-a-new-mbr-partition-table">How to Create a New MBR Partition Table</h3>
<p>If the disk is unpartitioned, create a new MBR partition table using this command:</p>
<pre><code class="lang-bash">(parted) mklabel msdos
</code></pre>
<p>This instructs <code>parted</code> to create a new MBR partition table on the currently selected storage device. This action will remove any existing partition information on the device, effectively starting with a clean slate for partitioning.</p>
<p>It's important to note that this command should be used with caution, as it erases the existing partition table and all associated data on the device.</p>
<h2 id="heading-how-to-create-primary-partitions">How to Create Primary Partitions</h2>
<p>You can create a primary partition with specified filesystem type, start, and end:</p>
<pre><code class="lang-bash">(parted) mkpart primary [filesystem-type] [start] [end]
</code></pre>
<ul>
<li><p><code>mkpart</code>: This is the <code>parted</code> command used to create a new partition. The term "mkpart" stands for "make partition."</p>
</li>
<li><p><code>primary</code>: This specifies the type of partition to be created. In this case, it's a primary partition. Primary partitions are the basic partitions on a disk, and they can be used to install an operating system or store data.</p>
</li>
<li><p><code>[filesystem-type]</code>: Replace this placeholder with the desired filesystem type for the partition. Common filesystem types include <code>ext4</code>, <code>ntfs</code>, <code>fat32</code>, and so on.</p>
</li>
<li><p><code>[start]</code> and <code>[end]</code>: These placeholders represent the starting and ending points of the partition, specified in megabytes (MB) or as a percentage of the total disk size. For example, you might define the partition to start at 1 GB and end at 10 GB.</p>
</li>
</ul>
<h3 id="heading-how-to-display-partition-information">How to Display Partition Information</h3>
<p>Use this command to verify the partition layout:</p>
<pre><code class="lang-bash">(parted) <span class="hljs-built_in">print</span> free
</code></pre>
<p>When you enter <code>(parted) print free</code> in the <code>parted</code> interactive mode, it will provide a summary of the free space available on the selected disk, including details such as the starting and ending points of the unallocated space, its size, and any constraints on creating new partitions within that space.</p>
<p>Here's the output:</p>
<pre><code class="lang-bash">(parted) <span class="hljs-built_in">print</span> free
Model: ABC Storage Device
Disk /dev/sdX: 1000GB
Sector size (logical/physical): 512B/4096B
Partition Table: msdos
Disk Flags:

Number  Start   End     Size    Type  File system  Flags
        32.3kB  1049kB  1017kB  Free Space
 1      1049kB  256MB   255MB   primary  ext4         boot
 2      256MB   512MB   256MB   primary  linux-swap
 3      512MB   1000GB  1000GB  primary  ntfs
</code></pre>
<p>Press <code>ctrl + d</code> to get out of parted.</p>
<h3 id="heading-how-to-format-the-partition-with-mkfs">How to Format the Partition with <code>mkfs</code></h3>
<p>After partitioning, format the partition with a desired filesystem (for example: ext4)</p>
<pre><code class="lang-bash">mkfs.[filesystem-type] /dev/sdX1
</code></pre>
<p>This tells the system to create a file system of the specified type on the designated partition. After executing this command, the chosen file system will be created on the partition, and it will be ready to store files and data.</p>
<h3 id="heading-how-to-automate-mounting-with-fstab">How to Automate Mounting with <code>fstab</code></h3>
<p>You can find the UUID of the partition using this command:</p>
<pre><code class="lang-bash">sudo blkid /dev/sdX1
</code></pre>
<p>Edit <code>/etc/fstab</code> to include an entry for automatic mounting, and make sure filesystem-type is as same as filesystem type of <code>mkfs.[filesystem-type]</code></p>
<p>The <code>/etc/fstab</code> file, short for "file systems table," is a crucial configuration file on Unix and Unix-like operating systems, including Linux. It is used to define how storage devices (such as hard drives and partitions) should be mounted into the file system.</p>
<p>The primary purpose of the <code>/etc/fstab</code> file is to specify how various storage devices should be mounted during the system's startup process.</p>
<pre><code class="lang-bash">UUID=[your-uuid] /dir-to-mount-path [filesystem-type] defaults 0 0
</code></pre>
<p>Here's an example:</p>
<pre><code class="lang-bash">UUID=127854Vd344HHttRpq977739 /kedar ext4 defaults 0 0
</code></pre>
<p><code>UUID=127854Vd344HHttRpq977739</code>: This part specifies the Universally Unique Identifier (UUID) of the block device or partition to be mounted. The UUID is a unique identifier assigned to the filesystem, ensuring a consistent reference even if the device names change. In this case, the UUID is "127854Vd344HHttRpq977739."</p>
<p><code>/kedar</code>: This part indicates the mount point, which is the directory in the file system where the device specified by the UUID will be attached. In this example, the mount point is "/kedar."</p>
<p><code>ext4</code>: This specifies the type of the file system on the device. In this case, it's "ext4," which is a commonly used file system on Linux.</p>
<p><code>defaults</code>: The "defaults" option is a shorthand for a set of commonly used mount options. It includes options like read/write access and allows executing binaries from the file system. If more specific options are needed, they can be listed explicitly.</p>
<p><code>0</code>: This field represents the dump option. It is used by the <code>dump</code> command to determine whether the file system should be backed up. A value of 0 indicates that no automatic backups are required.</p>
<p><code>0</code>: The last field represents the pass option. It is used by the <code>fsck</code> (file system check) utility to determine the order in which file systems are checked at boot time. A value of 0 indicates that the file system should not be checked.</p>
<p>This <code>/etc/fstab</code> entry directs the system to mount a device, identified by the specified UUID and formatted as ext4, onto the "/kedar" directory during the boot process. The mount is performed with default options, and there is no requirement for automatic backups or file system checks.</p>
<p>Here are some reasons to use UUID instead of partition name</p>
<ul>
<li><p>Device names (e.g., <code>/dev/sda1</code>) can change, especially in systems with multiple storage devices or when hardware configurations are modified. UUIDs remain constant.</p>
</li>
<li><p>During the boot process, multiple storage devices may be detected simultaneously. UUIDs eliminate the possibility of race conditions, where the operating system may assign different names to the same physical device in different boot instances.</p>
</li>
<li><p>If device names are used in <code>/etc/fstab</code> and names change due to hardware changes, it may lead to mounting errors or data corruption. UUIDs ensure the correct device is always mounted.</p>
</li>
<li><p>UUIDs are more human-readable and less prone to typos than device names, making the <code>/etc/fstab</code> file easier to read and maintain.</p>
</li>
<li><p>UUIDs remain the same when moving a storage device from one system to another, ensuring correct mounting without modifying <code>/etc/fstab</code> for the new system.</p>
</li>
</ul>
<p>Here's an example <code>/etc/fstab</code> entry using UUID:</p>
<pre><code class="lang-bash">UUID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx /mnt/data ext4 defaults 0 2
</code></pre>
<p>Replace <code>xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</code> with the actual UUID of the partition.</p>
<h3 id="heading-how-to-mount-a-partition">How to Mount a Partition</h3>
<p>Once everything is done, we will mount partition on one of your directory.</p>
<pre><code class="lang-bash">mount -av
</code></pre>
<p>If this returns a "successfully mounted" message on <code>kedar</code> directory, then your partition has mounted on <code>kedar</code> directory.</p>
<p>Now every time you turn on your system, the specified partition will automatically be mounted on the "/kedar" directory, ensuring seamless access to its contents throughout your computing sessions.</p>
<p>This persistent mount configuration is facilitated by the entry in the <code>/etc/fstab</code> file, providing a consistent and reliable attachment of the partition during the system's startup process.</p>
<h2 id="heading-how-to-create-logical-partitions">How to Create Logical Partitions</h2>
<p>Logical partitions are a key concept in disk partitioning, especially in systems using the Master Boot Record (MBR) partitioning scheme.</p>
<p>MBR allows for a maximum of four primary partitions, and to overcome this limitation, one of the primary partitions can be designated as an extended partition.</p>
<p>Within the extended partition, multiple logical partitions can then be created.</p>
<h3 id="heading-identify-the-disk"><strong>Identify the Disk</strong></h3>
<p>Begin by identifying the disk where you want to create logical partitions. You can use the <code>lsblk</code> or <code>fdisk -l</code> commands to list the available disks and their partitions</p>
<pre><code class="lang-bash">lsblk
</code></pre>
<h3 id="heading-launch-parted-for-the-disk"><strong>Launch Parted for the Disk</strong></h3>
<p>Use the <code>parted</code> command to launch the interactive interface for the chosen disk (replace 'X' with the appropriate disk identifier):</p>
<pre><code class="lang-bash">parted /dev/sdX
</code></pre>
<h3 id="heading-create-an-extended-partition"><strong>Create an Extended Partition</strong></h3>
<p>If not already created, you need to establish an extended partition within which the logical partitions will reside.</p>
<p>This step is essential as logical partitions can only exist within an extended partition. Assume the free space is from 50% to 100% of the disk:</p>
<pre><code class="lang-bash">(parted) mkpart extended 50% 100%
</code></pre>
<h3 id="heading-create-logical-partitions"><strong>Create Logical Partitions</strong></h3>
<p>Now, within the extended partition, you can create logical partitions. The following example creates a logical partition using <strong>ext4</strong> file system from 0% to 25% of the extended partition.</p>
<p>You can also give size using MB format. For that you need to know the free space. You can do that using <code>print free</code> command inside parted.</p>
<pre><code class="lang-bash">(parted) mkpart logical ext4 0% 25%
</code></pre>
<p>You can repeat this step to create additional logical partitions with different sizes or file systems.</p>
<h3 id="heading-partitioning-scheme-numbering-convention">Partitioning Scheme Numbering Convention</h3>
<p>In the Master Boot Record (MBR) partitioning scheme, the numbering convention for logical partitions within an extended partition typically starts from 5. This is because the four primary partitions (if they exist) are assigned numbers 1 to 4, and logical partitions are numbered starting from 5.</p>
<p>Here's a common numbering scheme:</p>
<ul>
<li><p>Primary Partition 1: <code>/dev/sdX1</code></p>
</li>
<li><p>Primary Partition 2: <code>/dev/sdX2</code></p>
</li>
<li><p>Primary Partition 3: <code>/dev/sdX3</code></p>
</li>
<li><p>Primary Partition 4: <code>/dev/sdX4</code></p>
</li>
<li><p>Extended Partition: <code>/dev/sdX4</code> (the extended partition is counted as one of the four)</p>
</li>
<li><p>Logical Partition 5: <code>/dev/sdX5</code></p>
</li>
<li><p>Logical Partition 6: <code>/dev/sdX6</code></p>
</li>
<li><p>Logical Partition 7: <code>/dev/sdX7</code>, and so on.</p>
</li>
</ul>
<h2 id="heading-wrapping-up"><strong>Wrapping Up</strong></h2>
<p>Thank you for exploring how MBR disk partitioning works with me today. You can dive deeper into the realm of Linux expertise and stay tuned for more insightful content in my future tutorials.</p>
<p>You can follow me on:</p>
<ul>
<li><p><a target="_blank" href="https://twitter.com/Kedar__98">Twitter</a></p>
</li>
<li><p><a target="_blank" href="https://www.linkedin.com/in/kedar-makode-9833321ab/?originalSubdomain=in">LinkedIn</a></p>
</li>
</ul>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Web Storage API – How to Store Data on the Browser ]]>
                </title>
                <description>
                    <![CDATA[ The Web Storage API is a set of APIs exposed by the browser so that you can store data in the browser. The data stored in the Web Storage use the key/value pair format, and both data will be stored as strings. There are two types of storage introduce... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/web-storage-api-how-to-store-data-on-the-browser/</link>
                <guid isPermaLink="false">66bd91a827629f4c5e1893bc</guid>
                
                    <category>
                        <![CDATA[ browser ]]>
                    </category>
                
                    <category>
                        <![CDATA[ data ]]>
                    </category>
                
                    <category>
                        <![CDATA[ storage ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Web Development ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Nathan Sebhastian ]]>
                </dc:creator>
                <pubDate>Fri, 12 Jan 2024 17:43:34 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2024/01/web-storage-api-feature-image.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>The Web Storage API is a set of APIs exposed by the browser so that you can store data in the browser.</p>
<p>The data stored in the Web Storage use the key/value pair format, and both data will be stored as strings.</p>
<p>There are two types of storage introduced in the Web Storage API: Local Storage and Session Storage.</p>
<p>In this article, I’m going to show you how to use the Web Storage API and why it’s useful for web developers.</p>
<h2 id="heading-how-the-web-storage-api-works">How the Web Storage API Works</h2>
<p>The Web Storage API exposes a set of objects and methods that you can use to store data in the browser. The data you store in Web Storage is private, which means no other website can access it.</p>
<p>In Google Chrome, you can view Web Storage by opening the developer tools window and going to the Application tab as shown below:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2024/01/web-storage-location-1.png" alt="Image" width="600" height="400" loading="lazy">
<em>The web storage location in Google Chrome</em></p>
<p>In the picture above, you can see that the Storage menu also has other storage types like Indexed DB, Web SQL, and cookies. The Web SQL standard has been deprecated, and IndexedDB is rarely used because it’s too complex. Any data you store in IndexedDB might better be stored on the server.</p>
<p>As for cookies, it’s a more traditional mechanism of storing data that only allows you to store a maximum of 4 KB of data. By contrast, the Local Storage capacity is 10 MB and the session storage has 5 MB capacity.</p>
<p>This is why we’re going to focus only on Local Storage and Session Storage in this article.</p>
<h2 id="heading-local-storage-and-session-storage-explained">Local Storage and Session Storage Explained</h2>
<p>Local Storage and Session Storage are the two standard mechanisms supported by the Web Storage API.</p>
<p>Web storage is domain specific, meaning data stored under one domain (netflix.com) can’t be accessed by another domain (www.netflix.com or members.netflix.com)</p>
<p>Web storage is also protocol specific. This means the data you store in a <code>http://</code> site won’t be available under the <code>https://</code> site.</p>
<p>The main difference between Local and Session Storage is that Local Storage will store your data forever. If you want to remove the data, you need to use the available method or clear it manually from the Applications tab.</p>
<p>By contrast, the data stored in session storage is only available during the page session. When you close the browser or the tab, the session storage for that specific tab is removed.</p>
<p>Both Local and Session Storage can be accessed through the <code>window</code> object under the variables <code>localStorage</code> and <code>sesionStorage</code>, respectively. Let’s see the methods and properties of these storage types next.</p>
<h3 id="heading-methods-and-properties-of-local-and-session-storage">Methods and Properties of Local and Session Storage</h3>
<p>Both Local and Session Storage have the same methods and properties. To set a new key/value pair in the Local Storage, you can use the <code>setItem()</code> method of the <code>localStorage</code> object:</p>
<pre><code class="lang-js"><span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">'firstName'</span>, <span class="hljs-string">'Nathan'</span>);
</code></pre>
<p>If you look into the Local Storage menu in the browser, you should see the data above saved into the storage as follows:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2024/01/localstorage-setitem.png" alt="Image" width="600" height="400" loading="lazy">
<em>Storing a key/value pair in Local Storage</em></p>
<p>The key you used in <code>localStorage</code> must be unique. If you set another data with a key that already exists, then the <code>setItem()</code> method will replace the previous value with the new one.</p>
<p>To get the value out of local storage, you need to call the <code>getItem()</code> method and pass the key you used when saving the data. If the key doesn’t exist, then <code>getItem()</code> will return <code>null</code> back:</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> firstName = <span class="hljs-built_in">localStorage</span>.getItem(<span class="hljs-string">'firstName'</span>);
<span class="hljs-built_in">console</span>.log(firstName); <span class="hljs-comment">// Nathan</span>

<span class="hljs-keyword">const</span> lastName = <span class="hljs-built_in">localStorage</span>.getItem(<span class="hljs-string">'lastName'</span>);
<span class="hljs-built_in">console</span>.log(lastName); <span class="hljs-comment">// null</span>
</code></pre>
<p>To remove the data you have in local storage, call the <code>removeItem()</code> method and pass the key pointing to the data you want to remove:</p>
<pre><code class="lang-js"><span class="hljs-built_in">localStorage</span>.removeItem(<span class="hljs-string">'firstName'</span>);
</code></pre>
<p>The <code>removeItem()</code> method will always return <code>undefined</code>. When the data you want to remove doesn’t exist, the method simply does nothing.</p>
<p>If you want to clear the storage, you can use the <code>clear()</code> method:</p>
<pre><code class="lang-js"><span class="hljs-built_in">localStorage</span>.clear();
</code></pre>
<p>The <code>clear()</code> method removes all key/value pairs from the storage object you are accessing.</p>
<h3 id="heading-properties-of-local-and-session-storage">Properties of Local and Session Storage</h3>
<p>Both storage types have only one property, which is the <code>length</code> property that shows the amount of data stored in them.</p>
<pre><code class="lang-js">sessionStorage.setItem(<span class="hljs-string">'firstName'</span>, <span class="hljs-string">'Nathan'</span>);
sessionStorage.setItem(<span class="hljs-string">'lastName'</span>, <span class="hljs-string">'Sebhastian'</span>);

<span class="hljs-built_in">console</span>.log(sessionStorage.length); <span class="hljs-comment">// 2</span>

sessionStorage.clear();
<span class="hljs-built_in">console</span>.log(sessionStorage.length); <span class="hljs-comment">// 0</span>
</code></pre>
<p>And that’s all the methods and properties you can access in <code>localStorage</code> and <code>sessionStorage</code>.</p>
<h2 id="heading-how-to-store-json-strings-in-web-storage-storage">How to Store JSON Strings in Web Storage Storage</h2>
<p>Since Web Storage always stores data as strings, you can store complex data as a JSON string, and then convert that string back into an object when you access it.</p>
<p>For example, suppose I want to store the following information about a user:</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> user = {
  <span class="hljs-attr">firstName</span>: <span class="hljs-string">'Nathan'</span>,
  <span class="hljs-attr">lastName</span>: <span class="hljs-string">'Sebhastian'</span>,
  <span class="hljs-attr">url</span>: <span class="hljs-string">'https://codewithnathan.com'</span>,
};
</code></pre>
<p>At first, I might store the data as a series of key/value pairs like this:</p>
<pre><code class="lang-js"><span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">'firstName'</span>, user.firstName);
<span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">'lastName'</span>, user.lastName);
<span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">'url'</span>, user.url);
</code></pre>
<p>But a better way is to convert the JavaScript object into a JSON string, and then store the data under one key as follows:</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> user = {
  <span class="hljs-attr">firstName</span>: <span class="hljs-string">'Nathan'</span>,
  <span class="hljs-attr">lastName</span>: <span class="hljs-string">'Sebhastian'</span>,
  <span class="hljs-attr">url</span>: <span class="hljs-string">'https://codewithnathan.com'</span>,
};

<span class="hljs-keyword">const</span> userData = <span class="hljs-built_in">JSON</span>.stringify(user);

<span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">'user'</span>, userData);
</code></pre>
<p>Now the local storage will have only one key/value pair with the JSON string as its value. You can open the Applications tab to see this:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2024/01/store-as-json.png" alt="Image" width="600" height="400" loading="lazy">
<em>Storing a JSON string in Local Storage</em></p>
<p>When you need the data, call the <code>getItem()</code> and <code>JSON.parse()</code> methods as follows:</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> getUser = <span class="hljs-built_in">JSON</span>.parse(<span class="hljs-built_in">localStorage</span>.getItem(<span class="hljs-string">'user'</span>));

<span class="hljs-built_in">console</span>.log(getUser);
<span class="hljs-comment">// {firstName: 'Nathan', lastName: 'Sebhastian', url: 'https://codewithnathan.com'}</span>
</code></pre>
<p>Here, you can see that the data is returned as a regular JavaScript object.</p>
<h2 id="heading-local-storage-vs-session-storage-which-one-to-use">Local Storage vs Session Storage – Which One to Use?</h2>
<p>Based on my experience, <code>localStorage</code> is the preferred Web Storage mechanism because the data will persist as long as you need it to. When you don’t need the data, you can remove it using the <code>removeItem()</code> method.</p>
<p><code>sessionStorage</code> is only used when you need to store temporary data, like tracking whether a popup box has been shown to the user or not.</p>
<p>But this is also open to discussion because you might not want to show a popup every time the user logs into your web application, but only once. In that case, you should use <code>localStorage</code> instead.</p>
<p>My rule of thumb is to use <code>localStorage</code> first, and <code>sessionStorage</code> when the situation needs it.</p>
<h2 id="heading-benefits-of-using-the-web-storage-api">Benefits of Using the Web Storage API</h2>
<p>Now that you know how the Web Storage API works, you can see that there are some benefits of using it:</p>
<ol>
<li>Storing data on the browser reduces the need to make a server request for a piece of information. This can improve the performance of your web applications.</li>
<li>The simple key/value pair format allows you to store user preferences and local settings that should persist between sessions.</li>
<li>The Web Storage API is simple to use, providing only a few methods and one property. It’s simple to set and retrieve data using JavaScript</li>
<li>It has offline support. By storing necessary data locally, the Web Storage enables your web application to work offline.</li>
<li>The Web Storage is also a standardized API, meaning the code you write will work in many different browsers.</li>
</ol>
<p>But of course, not all data should be stored in the Web Storage API. You still need a server database to keep records that are important for your application.</p>
<h2 id="heading-conclusion">Conclusion</h2>
<p>Web Storage is a useful API that allows you to quickly store and retrieve data from the browser. Using Web Storage, you can store the user’s preferences when accessing your application.</p>
<p><code>localStorage</code> allows you to store data forever until it’s removed manually, while <code>sessionStorage</code> will persist as long as the browser or tab is open.</p>
<p>Some benefits of using the Web Storage API include reducing server requests, offline support, and a simple API that’s easy to use. It’s also standardized, so it will work on different browsers.</p>
<p>If you enjoyed this article and want to take your JavaScript skills to the next level, I recommend you check out my new book <em>Beginning Modern JavaScript</em> <a target="_blank" href="https://codewithnathan.com/beginning-modern-javascript">here</a>.</p>
<p><a target="_blank" href="https://codewithnathan.com/beginning-modern-javascript"><img src="https://www.freecodecamp.org/news/content/images/2024/01/beginning-js-cover.png" alt="beginning-js-cover" width="600" height="400" loading="lazy"></a></p>
<p>The book is designed to be easy for beginners and accessible to anyone looking to learn JavaScript. It provides a step-by-step gentle guide that will help you understand how to use JavaScript to create a dynamic web application.</p>
<p>Here's my promise: <em>You will actually feel like you understand what you're doing with JavaScript.</em></p>
<p>See you later!  </p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Web Storage Explained – How to Use localStorage and sessionStorage in JavaScript Projects ]]>
                </title>
                <description>
                    <![CDATA[ Web Storage is what the JavaScript API browsers provide for storing data locally and securely within a user’s browser. Session and local storage are the two main types of web storage. They are similar to regular properties objects, but they persist (... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/web-storage-localstorage-vs-sessionstorage-in-javascript/</link>
                <guid isPermaLink="false">66ba0e11256f04965e2bd0c7</guid>
                
                    <category>
                        <![CDATA[ api ]]>
                    </category>
                
                    <category>
                        <![CDATA[ JavaScript ]]>
                    </category>
                
                    <category>
                        <![CDATA[ General Programming ]]>
                    </category>
                
                    <category>
                        <![CDATA[ storage ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Web Development ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Oluwatobi Sofela ]]>
                </dc:creator>
                <pubDate>Mon, 09 Oct 2023 16:45:31 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2023/10/web-storage-explained-local-and-session-storage-objects-in-javascript-codesweetly.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p><strong>Web Storage</strong> is what the JavaScript <a target="_blank" href="https://codesweetly.com/application-programming-interface-api-explained">API</a> browsers provide for storing data locally and securely within a user’s browser.</p>
<p>Session and local storage are the two main types of web storage. They are similar to regular <a target="_blank" href="https://codesweetly.com/javascript-properties-object">properties objects</a>, but they persist (do not disappear) when the webpage reloads.</p>
<p>This article aims to show you exactly how the two storage objects work in JavaScript. We will also use a To-Do list exercise to practice using web storage in a web app project.</p>
<h2 id="heading-table-of-contents">Table of Contents</h2>
<ol>
<li><a class="post-section-overview" href="#heading-what-is-the-session-storage-object">What is the Session Storage Object?</a></li>
<li><a class="post-section-overview" href="#heading-what-is-the-local-storage-object">What is the Local Storage Object?</a></li>
<li><a class="post-section-overview" href="#heading-how-to-access-the-session-and-local-storage-objects">How to Access the Session and Local Storage Objects</a></li>
<li><a class="post-section-overview" href="#heading-what-are-web-storages-built-in-interfaces">What are Web Storage’s Built-In Interfaces?</a><ul>
<li><a class="post-section-overview" href="#heading-what-is-web-storages-setitem-method">What is web storage’s <code>setItem()</code> method?</a></li>
<li><a class="post-section-overview" href="#heading-what-is-web-storages-key-method">What is web storage’s <code>key()</code> method?</a></li>
<li><a class="post-section-overview" href="#heading-what-is-web-storages-getitem-method">What is web storage’s <code>getItem()</code> method?</a></li>
<li><a class="post-section-overview" href="#heading-what-is-web-storages-length-property">What is web storage’s <code>length</code> property?</a></li>
<li><a class="post-section-overview" href="#heading-what-is-web-storages-removeitem-method">What is web storage’s <code>removeItem()</code> method?</a></li>
<li><a class="post-section-overview" href="#heading-what-is-web-storages-clear-method">What is web storage’s <code>clear()</code> method?</a></li>
</ul>
</li>
<li><a class="post-section-overview" href="#heading-time-to-practice-with-web-storage">Time to Practice with Web Storage 🤸‍♂️🏋️‍♀️</a><ul>
<li><a class="post-section-overview" href="#heading-the-problem">The Problem</a></li>
<li><a class="post-section-overview" href="#heading-your-exercise">Your Exercise</a></li>
<li><a class="post-section-overview" href="#heading-bonus-exercise">Bonus Exercise</a></li>
</ul>
</li>
<li><a class="post-section-overview" href="#heading-how-did-you-go-about-solving-the-web-storage-exercise">How Did You Go About Solving the Web Storage Exercise?</a><ul>
<li><a class="post-section-overview" href="#heading-how-to-prevent-the-session-storage-panes-to-do-items-from-disappearing-on-page-reload">How to prevent the Session Storage pane’s To-Do items from disappearing on page reload</a></li>
<li><a class="post-section-overview" href="#heading-how-to-prevent-the-local-storage-panes-to-do-items-from-disappearing-on-page-reload-or-reopen">How to prevent the Local Storage pane’s To-Do items from disappearing on page reload or reopen</a></li>
<li><a class="post-section-overview" href="#heading-how-to-auto-display-the-session-sections-previously-added-tasks-on-page-reload">How to auto-display the Session section’s previously added tasks on page reload</a></li>
<li><a class="post-section-overview" href="#heading-how-to-auto-display-the-local-sections-previously-added-tasks-on-page-reload-or-reopen">How to auto-display the Local section’s previously added tasks on page reload or reopen</a></li>
<li><a class="post-section-overview" href="#heading-how-to-check-the-total-items-in-the-browsers-session-storage">How to check the total items in the browser’s session storage</a></li>
<li><a class="post-section-overview" href="#heading-how-to-display-the-local-storages-zeroth-index-items-name">How to display the local storage’s zeroth index item’s name</a></li>
<li><a class="post-section-overview" href="#heading-how-to-empty-the-browsers-session-storage">How to empty the browser’s session storage</a></li>
</ul>
</li>
<li><a class="post-section-overview" href="#heading-how-to-continue-practicing-with-web-storage">How to Continue Practicing with Web Storage 🧗‍♀️🚀</a></li>
<li><a class="post-section-overview" href="#heading-web-storage-vs-cookies-what-is-the-difference">Web Storage vs. Cookies: What is the Difference?</a></li>
<li><a class="post-section-overview" href="#heading-wrapping-up">Wrapping up</a></li>
</ol>
<p>Without further ado, let’s discuss session storage.</p>
<h2 id="heading-what-is-the-session-storage-object">What is the Session Storage Object?</h2>
<p>The session storage object (<code>window.sessionStorage</code>) stores data that persists for only one session of an opened tab.</p>
<p>In other words, whatever gets stored in the <code>window.sessionStorage</code> object will not disappear on a reload of the web page. Instead, the computer will delete the stored data only when users close the browser tab or window.</p>
<p><strong>Note the following:</strong></p>
<ul>
<li>The data stored inside the session storage is per-<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Glossary/Origin">origin</a> and per-instance. In other words, <code>http://freecodecamp.com</code>’s <code>sessionStorage</code> object is different from <code>https://freecodecamp.com</code>’s <code>sessionStorage</code> object because the two origins use different <a target="_blank" href="https://codesweetly.com/web-address-url#scheme">schemes</a> (<code>http</code> and <code>https</code>).</li>
<li>Per-instance means per-window or per-tab. In other words, the <code>sessionStorage</code> object’s lifespan expires once users close the instance (window or tab).</li>
<li>Browsers create a unique page session for each new tab or window. Therefore, users can run multiple instances of an app without interfering with each instance’s session storage. (Note: Cookies do not have good support for running multiple instances of the same app. Such an attempt can cause errors such as <a target="_blank" href="https://html.spec.whatwg.org/multipage/webstorage.html#introduction-15">double entry of bookings</a>.)</li>
<li>Session storage is a property of the global <code>Window</code> object. So <code>sessionStorage.setItem()</code> is equivalent to <code>window.sessionStorage.setItem()</code>.</li>
</ul>
<h2 id="heading-what-is-the-local-storage-object">What is the Local Storage Object?</h2>
<p>The local storage object (<code>window.localStorage</code>) stores data that persists even when users close their browser tab (or window).</p>
<p>In other words, whatever gets stored in the <code>window.localStorage</code> object will not disappear during a reload or reopening of the web page or when users close their browsers. Those data have no expiration time. Browsers never clear them automatically.</p>
<p>The computer will delete the <code>window.localStorage</code> object’s content in the following instances only:</p>
<ol>
<li>When the content gets cleared through JavaScript</li>
<li>When the browser’s cache gets cleared</li>
</ol>
<p><strong>Note the following:</strong></p>
<ul>
<li>The <code>window.localStorage</code> object’s storage limit is larger than the <code>window.sessionStorage</code>.</li>
<li>The data stored inside the local storage is per-<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Glossary/Origin">origin</a>. In other words, <code>http://freecodecamp.com</code>’s <code>localStorage</code> object is different from <code>https://freecodecamp.com</code>’s <code>localStorage</code> object because the two origins use different <a target="_blank" href="https://codesweetly.com/web-address-url#scheme">schemes</a> (<code>http</code> and <code>https</code>).</li>
<li>There are inconsistencies with how browsers handle the local storage of documents not served from a web server (for instance, pages with a <code>file:</code> URL scheme). Therefore, the <code>localStorage</code> object may behave differently among browsers when used with non-HTTP URLs, such as <code>file:///document/on/users/local/system.html</code>.</li>
<li>Local storage is a property of the global <code>Window</code> object. Therefore, <code>localStorage.setItem()</code> is equivalent to <code>window.localStorage.setItem()</code>.</li>
</ul>
<h2 id="heading-how-to-access-the-session-and-local-storage-objects">How to Access the Session and Local Storage Objects</h2>
<p>You can access the two web storages by:</p>
<ol>
<li>Using the same technique as you'd use for <a target="_blank" href="https://codesweetly.com/javascript-properties-object#how-to-access-an-objects-value">accessing regular JavaScript objects</a></li>
<li>Using web storage’s built-in interfaces</li>
</ol>
<p>For instance, consider the snippet below:</p>
<pre><code class="lang-js">sessionStorage.bestColor = <span class="hljs-string">"Green"</span>;
sessionStorage[<span class="hljs-string">"bestColor"</span>] = <span class="hljs-string">"Green"</span>;
sessionStorage.setItem(<span class="hljs-string">"bestColor"</span>, <span class="hljs-string">"Green"</span>);
</code></pre>
<p>The three statements above do the same thing—they set <code>bestColor</code>’s value. But the third line is recommended because it uses web storage’s <code>setItem()</code> method.</p>
<p><strong>Tip:</strong> you should prefer using the web storage’s built-in interfaces to avoid <a target="_blank" href="https://2ality.com/2012/01/objects-as-maps.html">the pitfalls of using objects as key/value stores</a>.</p>
<p>Let’s discuss more on the web storage’s built-in interfaces below.</p>
<h2 id="heading-what-are-web-storages-built-in-interfaces">What are Web Storage’s Built-In Interfaces?</h2>
<p>The web storage built-in interfaces are the recommended tools for reading and manipulating a browser’s <code>sessionStorage</code> and <code>localStorage</code> objects.</p>
<p>The six (6) built-in interfaces are:</p>
<ul>
<li><code>setItem()</code></li>
<li><code>key()</code></li>
<li><code>getItem()</code></li>
<li><code>length</code></li>
<li><code>removeItem()</code></li>
<li><code>clear()</code></li>
</ul>
<p>Let’s discuss each one now.</p>
<h3 id="heading-what-is-web-storages-setitem-method">What is web storage’s <code>setItem()</code> method?</h3>
<p>The <code>setItem()</code> method stores its <code>key</code> and <code>value</code> arguments inside the specified web storage object.</p>
<h4 id="heading-syntax-of-the-setitem-method">Syntax of the <code>setItem()</code> method</h4>
<p><code>setItem()</code> accepts two required <a target="_blank" href="https://codesweetly.com/javascript-arguments">arguments</a>. Here is the syntax:</p>
<pre><code class="lang-js">webStorageObject.setItem(key, value);
</code></pre>
<ul>
<li><code>webStorageObject</code> represents the storage object (<code>localStorage</code> or <code>sessionStorage</code>) you wish to manipulate.</li>
<li><code>key</code> is the first argument accepted by <code>setItem()</code>. It is a required string argument representing the name of the web storage property you want to create or update.</li>
<li><code>value</code> is the second argument accepted by <code>setItem()</code>. It is a required string argument specifying the value of the <code>key</code> you are creating or updating.</li>
</ul>
<p><strong>Note:</strong></p>
<ul>
<li>The <code>key</code> and <code>value</code> arguments are always strings.</li>
<li>Suppose you provide an integer as a <code>key</code> or <code>value</code>. In that case, browsers will convert them to strings automatically.</li>
<li><code>setItem()</code> may display an error message if the storage object is full.</li>
</ul>
<h4 id="heading-example-1-how-to-store-data-in-the-session-storage-object">Example 1: How to store data in the session storage object</h4>
<ol>
<li>Invoke <code>sessionStorage</code>’s <code>setItem()</code> method.</li>
<li>Provide the name and value of the data you wish to store.</li>
</ol>
<pre><code class="lang-js"><span class="hljs-comment">// Store color: "Pink" inside the browser's session storage object:</span>
sessionStorage.setItem(<span class="hljs-string">"color"</span>, <span class="hljs-string">"Pink"</span>);

<span class="hljs-comment">// Log the session storage object to the console:</span>
<span class="hljs-built_in">console</span>.log(sessionStorage);

<span class="hljs-comment">// The invocation above will return:</span>
{<span class="hljs-attr">color</span>: <span class="hljs-string">"Pink"</span>}
</code></pre>
<p><a target="_blank" href="https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/setitem/js-25hgkp"><strong>Try Editing It</strong></a></p>
<p><strong>Note:</strong> Your browser’s session storage may contain additional data if it already uses the storage object to store information.</p>
<h4 id="heading-example-2-how-to-store-data-in-the-local-storage-object">Example 2: How to store data in the local storage object</h4>
<ol>
<li>Invoke <code>localStorage</code>’s <code>setItem()</code> method.</li>
<li>Provide the name and value of the data you wish to store.</li>
</ol>
<pre><code class="lang-js"><span class="hljs-comment">// Store color: "Pink" inside the browser's local storage object:</span>
<span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">"color"</span>, <span class="hljs-string">"Pink"</span>);

<span class="hljs-comment">// Log the local storage object to the console:</span>
<span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">localStorage</span>);

<span class="hljs-comment">// The invocation above will return:</span>
{<span class="hljs-attr">color</span>: <span class="hljs-string">"Pink"</span>}
</code></pre>
<p><a target="_blank" href="https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/setitem/js-2hluvw"><strong>Try Editing It</strong></a></p>
<p><strong>Note:</strong></p>
<ul>
<li>Your browser’s local storage may contain additional data if it already uses the storage object to store information.</li>
<li>It is best to serialize objects before storing them in local or session storage. Otherwise, the computer will store the object as <code>"[object Object]"</code>.</li>
</ul>
<h4 id="heading-example-3-browsers-use-object-object-for-non-serialized-objects-in-the-web-storage">Example 3: Browsers use <code>"[object Object]"</code> for non-serialized objects in the web storage</h4>
<pre><code class="lang-js"><span class="hljs-comment">// Store myBio object inside the browser's session storage object:</span>
sessionStorage.setItem(<span class="hljs-string">"myBio"</span>, { <span class="hljs-attr">name</span>: <span class="hljs-string">"Oluwatobi"</span> });

<span class="hljs-comment">// Log the session storage object to the console:</span>
<span class="hljs-built_in">console</span>.log(sessionStorage);

<span class="hljs-comment">// The invocation above will return:</span>
{<span class="hljs-attr">myBio</span>: <span class="hljs-string">"[object Object]"</span>, <span class="hljs-attr">length</span>: <span class="hljs-number">1</span>}
</code></pre>
<p><a target="_blank" href="https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/setitem/js-n8m7hc"><strong>Try Editing It</strong></a></p>
<p>You can see that the computer stored the object as <code>"[object Object]"</code> because we did not serialize it.</p>
<h4 id="heading-example-4-how-to-store-serialized-objects-in-the-web-storage">Example 4: How to store serialized objects in the web storage</h4>
<pre><code class="lang-js"><span class="hljs-comment">// Store myBio object inside the browser's session storage object:</span>
sessionStorage.setItem(<span class="hljs-string">"myBio"</span>, <span class="hljs-built_in">JSON</span>.stringify({ <span class="hljs-attr">name</span>: <span class="hljs-string">"Oluwatobi"</span> }));

<span class="hljs-comment">// Log the session storage object to the console:</span>
<span class="hljs-built_in">console</span>.log(sessionStorage);

<span class="hljs-comment">// The invocation above will return:</span>
{<span class="hljs-attr">myBio</span>: <span class="hljs-string">'{"name":"Oluwatobi"}'</span>, <span class="hljs-attr">length</span>: <span class="hljs-number">1</span>}
</code></pre>
<p><a target="_blank" href="https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/setitem/js-edfh43"><strong>Try Editing It</strong></a></p>
<p>We used <code>JSON.stringify()</code> to convert the object to JSON before storing it in the web storage.</p>
<p><strong>Tip:</strong> Learn <a target="_blank" href="https://codesweetly.com/json-explained#how-to-convert-a-json-text-to-a-javascript-object">how to convert JSON to JavaScript objects</a>.</p>
<h3 id="heading-what-is-web-storages-key-method">What is web storage’s <code>key()</code> method?</h3>
<p>The <code>key()</code> method retrieves a specified web storage item’s name (key).</p>
<h4 id="heading-syntax-of-the-key-method">Syntax of the <code>key()</code> method</h4>
<p><code>key()</code> accepts one required argument. Here is the syntax:</p>
<pre><code class="lang-js">webStorageObject.key(index);
</code></pre>
<ul>
<li><code>webStorageObject</code> represents the storage object (<code>localStorage</code> or <code>sessionStorage</code>) whose key you wish to get.</li>
<li><code>index</code> is a required argument. It is an <a target="_blank" href="https://codesweetly.com/web-tech-terms-i#integer">integer</a> specifying the <a target="_blank" href="https://codesweetly.com/web-tech-terms-i#index">index</a> of the item whose key you want to get.</li>
</ul>
<h4 id="heading-example-1-how-to-get-the-name-of-an-item-in-the-session-storage-object">Example 1: How to get the name of an item in the session storage object</h4>
<ol>
<li>Invoke <code>sessionStorage</code>’s <code>key()</code> method.</li>
<li>Provide the index of the item whose name you wish to get.</li>
</ol>
<pre><code class="lang-js"><span class="hljs-comment">// Store carColor: "Pink" inside the browser's session storage object:</span>
sessionStorage.setItem(<span class="hljs-string">"carColor"</span>, <span class="hljs-string">"Pink"</span>);

<span class="hljs-comment">// Store pcColor: "Yellow" inside the session storage object:</span>
sessionStorage.setItem(<span class="hljs-string">"pcColor"</span>, <span class="hljs-string">"Yellow"</span>);

<span class="hljs-comment">// Store laptopColor: "White" inside the session storage object:</span>
sessionStorage.setItem(<span class="hljs-string">"laptopColor"</span>, <span class="hljs-string">"White"</span>);

<span class="hljs-comment">// Get the name of the item at index 1:</span>
sessionStorage.key(<span class="hljs-number">1</span>);
</code></pre>
<p><a target="_blank" href="https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/key/js-tptqtg"><strong>Try Editing It</strong></a></p>
<p><strong>Important:</strong> The <a target="_blank" href="https://en.wikipedia.org/wiki/User_agent">user-agent</a> defines the order of items in the session storage. In other words, <code>key()</code>’s output may vary based on how the user-agent orders the web storage’s items. So you shouldn't rely on <code>key()</code> to return a constant value.</p>
<h4 id="heading-example-2-how-to-get-the-name-of-an-item-in-the-local-storage-object">Example 2: How to get the name of an item in the local storage object</h4>
<ol>
<li>Invoke <code>localStorage</code>’s <code>key()</code> method.</li>
<li>Provide the index of the item whose name you wish to get.</li>
</ol>
<pre><code class="lang-js"><span class="hljs-comment">// Store carColor: "Pink" inside the browser's local storage object:</span>
<span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">"carColor"</span>, <span class="hljs-string">"Pink"</span>);

<span class="hljs-comment">// Store pcColor: "Yellow" inside the local storage object:</span>
<span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">"pcColor"</span>, <span class="hljs-string">"Yellow"</span>);

<span class="hljs-comment">// Store laptopColor: "White" inside the local storage object:</span>
<span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">"laptopColor"</span>, <span class="hljs-string">"White"</span>);

<span class="hljs-comment">// Get the name of the item at index 1:</span>
<span class="hljs-built_in">localStorage</span>.key(<span class="hljs-number">1</span>);
</code></pre>
<p><a target="_blank" href="https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/key/js-tclrbd"><strong>Try Editing It</strong></a></p>
<p><strong>Important:</strong> The user-agent defines the order of items in the local storage. In other words, <code>key()</code>’s output may vary based on how the user-agent orders the web storage’s items. So you shouldn't rely on <code>key()</code> to return a constant value.</p>
<h3 id="heading-what-is-web-storages-getitem-method">What is web storage’s <code>getItem()</code> method?</h3>
<p>The <code>getItem()</code> method retrieves the value of a specified web storage item.</p>
<h4 id="heading-syntax-of-the-getitem-method">Syntax of the <code>getItem()</code> method</h4>
<p><code>getItem()</code> accepts one required argument. Here is the syntax:</p>
<pre><code class="lang-js">webStorageObject.getItem(key);
</code></pre>
<ul>
<li><code>webStorageObject</code> represents the storage object (<code>localStorage</code> or <code>sessionStorage</code>) whose item you wish to get.</li>
<li><code>key</code> is a required argument. It is a <a target="_blank" href="https://codesweetly.com/javascript-primitive-data-type#string-primitive-data-type">string</a> specifying the name of the web storage <a target="_blank" href="https://codesweetly.com/javascript-properties-object#syntax-of-a-javascript-object">property</a> whose value you want to get.</li>
</ul>
<h4 id="heading-example-1-how-to-get-data-from-the-session-storage-object">Example 1: How to get data from the session storage object</h4>
<ol>
<li>Invoke <code>sessionStorage</code>’s <code>getItem()</code> method.</li>
<li>Provide the name of the data you wish to get.</li>
</ol>
<pre><code class="lang-js"><span class="hljs-comment">// Store color: "Pink" inside the browser's session storage object:</span>
sessionStorage.setItem(<span class="hljs-string">"color"</span>, <span class="hljs-string">"Pink"</span>);

<span class="hljs-comment">// Get color's value from the session storage:</span>
sessionStorage.getItem(<span class="hljs-string">"color"</span>);

<span class="hljs-comment">// The invocation above will return:</span>
<span class="hljs-string">"Pink"</span>
</code></pre>
<p><a target="_blank" href="https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/getitem/js-xk9auv"><strong>Try Editing It</strong></a></p>
<h4 id="heading-example-2-how-to-get-data-from-the-local-storage-object">Example 2: How to get data from the local storage object</h4>
<ol>
<li>Invoke <code>localStorage</code>’s <code>getItem()</code> method.</li>
<li>Provide the name of the data you wish to get.</li>
</ol>
<pre><code class="lang-js"><span class="hljs-comment">// Store color: "Pink" inside the browser's local storage object:</span>
<span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">"color"</span>, <span class="hljs-string">"Pink"</span>);

<span class="hljs-comment">// Get color's value from the local storage:</span>
<span class="hljs-built_in">localStorage</span>.getItem(<span class="hljs-string">"color"</span>);

<span class="hljs-comment">// The invocation above will return:</span>
<span class="hljs-string">"Pink"</span>
</code></pre>
<p><a target="_blank" href="https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/getitem/js-terw5e"><strong>Try Editing It</strong></a></p>
<p><strong>Note:</strong> The <code>getItem()</code> method will return <code>null</code> if its argument does not exist in the specified web storage.</p>
<h3 id="heading-what-is-web-storages-length-property">What is web storage’s <code>length</code> property?</h3>
<p>The <code>length</code> property returns the number of <a target="_blank" href="https://codesweetly.com/javascript-properties-object#syntax-of-a-javascript-object">properties</a> in the specified web storage.</p>
<h4 id="heading-syntax-of-the-length-property">Syntax of the <code>length</code> property</h4>
<p>Here is <code>length</code>’s syntax:</p>
<pre><code class="lang-js">webStorageObject.length;
</code></pre>
<p><code>webStorageObject</code> represents the storage object (<code>localStorage</code> or <code>sessionStorage</code>) whose length you wish to verify.</p>
<h4 id="heading-example-1-how-to-verify-the-number-of-items-in-the-session-storage-object">Example 1: How to verify the number of items in the session storage object</h4>
<p>Invoke <code>sessionStorage</code>’s <code>length</code> property.</p>
<pre><code class="lang-js"><span class="hljs-comment">// Store carColor: "Pink" inside the browser's session storage object:</span>
sessionStorage.setItem(<span class="hljs-string">"carColor"</span>, <span class="hljs-string">"Pink"</span>);

<span class="hljs-comment">// Store pcColor: "Yellow" inside the session storage object:</span>
sessionStorage.setItem(<span class="hljs-string">"pcColor"</span>, <span class="hljs-string">"Yellow"</span>);

<span class="hljs-comment">// Store laptopColor: "White" inside the session storage object:</span>
sessionStorage.setItem(<span class="hljs-string">"laptopColor"</span>, <span class="hljs-string">"White"</span>);

<span class="hljs-comment">// Verify the number of items in the session storage:</span>
sessionStorage.length;

<span class="hljs-comment">// The invocation above may return:</span>
<span class="hljs-number">3</span>
</code></pre>
<p><a target="_blank" href="https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/length/js-zasgst"><strong>Try Editing It</strong></a></p>
<p><strong>Note:</strong> Your <code>sessionStorage.length</code> invocation may return a value greater than <code>3</code> if your browser’s session storage already contains some stored information.</p>
<h4 id="heading-example-2-how-to-verify-the-number-of-items-in-the-local-storage-object">Example 2: How to verify the number of items in the local storage object</h4>
<p>Invoke <code>localStorage</code>’s <code>length</code> property.</p>
<pre><code class="lang-js"><span class="hljs-comment">// Store carColor: "Pink" inside the browser's local storage object:</span>
<span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">"carColor"</span>, <span class="hljs-string">"Pink"</span>);

<span class="hljs-comment">// Store pcColor: "Yellow" inside the local storage object:</span>
<span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">"pcColor"</span>, <span class="hljs-string">"Yellow"</span>);

<span class="hljs-comment">// Store laptopColor: "White" inside the local storage object:</span>
<span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">"laptopColor"</span>, <span class="hljs-string">"White"</span>);

<span class="hljs-comment">// Verify the number of items in the local storage:</span>
<span class="hljs-built_in">localStorage</span>.length;

<span class="hljs-comment">// The invocation above may return:</span>
<span class="hljs-number">3</span>
</code></pre>
<p><a target="_blank" href="https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/length/js-3f6lac"><strong>Try Editing It</strong></a></p>
<p><strong>Note:</strong> Your <code>localStorage.length</code> invocation may return a value greater than <code>3</code> if your browser's local storage already contains some stored information.</p>
<h3 id="heading-what-is-web-storages-removeitem-method">What is web storage’s <code>removeItem()</code> method?</h3>
<p>The <code>removeItem()</code> method removes a property from the specified web storage.</p>
<h4 id="heading-syntax-of-the-removeitem-method">Syntax of the <code>removeItem()</code> Method</h4>
<p><code>removeItem()</code> accepts one required argument. Here is the syntax:</p>
<pre><code class="lang-js">webStorageObject.removeItem(key);
</code></pre>
<ul>
<li><code>webStorageObject</code> represents the storage object (<code>localStorage</code> or <code>sessionStorage</code>) whose item you wish to remove.</li>
<li><code>key</code> is a required argument. It is a string specifying the name of the web storage property you want to remove.</li>
</ul>
<h4 id="heading-example-1-how-to-remove-data-from-the-session-storage-object">Example 1: How to remove data from the session storage object</h4>
<ol>
<li>Invoke <code>sessionStorage</code>’s <code>removeItem()</code> method.</li>
<li>Provide the name of the data you wish to remove.</li>
</ol>
<pre><code class="lang-js"><span class="hljs-comment">// Store carColor: "Pink" inside the browser's session storage object:</span>
sessionStorage.setItem(<span class="hljs-string">"carColor"</span>, <span class="hljs-string">"Pink"</span>);

<span class="hljs-comment">// Store pcColor: "Yellow" inside the session storage object:</span>
sessionStorage.setItem(<span class="hljs-string">"pcColor"</span>, <span class="hljs-string">"Yellow"</span>);

<span class="hljs-comment">// Store laptopColor: "White" inside the session storage object:</span>
sessionStorage.setItem(<span class="hljs-string">"laptopColor"</span>, <span class="hljs-string">"White"</span>);

<span class="hljs-comment">// Remove the pcColor item from the session storage:</span>
sessionStorage.removeItem(<span class="hljs-string">"pcColor"</span>);

<span class="hljs-comment">// Confirm whether the pcColor item still exists in the session storage:</span>
sessionStorage.getItem(<span class="hljs-string">"pcColor"</span>);

<span class="hljs-comment">// The invocation above will return:</span>
<span class="hljs-literal">null</span>
</code></pre>
<p><a target="_blank" href="https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/removeitem/js-1mywnh"><strong>Try Editing It</strong></a></p>
<p><strong>Note:</strong> The <code>removeItem()</code> method will do nothing if its argument does not exist in the session storage.</p>
<h4 id="heading-example-2-how-to-remove-data-from-the-local-storage-object">Example 2: How to remove data from the local storage object</h4>
<ol>
<li>Invoke <code>localStorage</code>’s <code>removeItem()</code> method.</li>
<li>Provide the name of the data you wish to remove.</li>
</ol>
<pre><code class="lang-js"><span class="hljs-comment">// Store carColor: "Pink" inside the browser's local storage object:</span>
<span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">"carColor"</span>, <span class="hljs-string">"Pink"</span>);

<span class="hljs-comment">// Store pcColor: "Yellow" inside the local storage object:</span>
<span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">"pcColor"</span>, <span class="hljs-string">"Yellow"</span>);

<span class="hljs-comment">// Store laptopColor: "White" inside the local storage object:</span>
<span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">"laptopColor"</span>, <span class="hljs-string">"White"</span>);

<span class="hljs-comment">// Remove the pcColor item from the local storage:</span>
<span class="hljs-built_in">localStorage</span>.removeItem(<span class="hljs-string">"pcColor"</span>);

<span class="hljs-comment">// Confirm whether the pcColor item still exists in the local storage:</span>
<span class="hljs-built_in">localStorage</span>.getItem(<span class="hljs-string">"pcColor"</span>);

<span class="hljs-comment">// The invocation above will return:</span>
<span class="hljs-literal">null</span>
</code></pre>
<p><a target="_blank" href="https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/removeitem/js-8doou3"><strong>Try Editing It</strong></a></p>
<p><strong>Note:</strong> The <code>removeItem()</code> method will do nothing if its argument does not exist in the local storage.</p>
<h3 id="heading-what-is-web-storages-clear-method">What is web storage’s <code>clear()</code> method?</h3>
<p>The <code>clear()</code> method clears (deletes) all the items in the specified web storage.</p>
<h4 id="heading-syntax-of-the-clear-method">Syntax of the <code>clear()</code> Method</h4>
<p><code>clear()</code> accepts no argument. Here is the syntax:</p>
<pre><code class="lang-js">webStorageObject.clear();
</code></pre>
<p><code>webStorageObject</code> represents the storage object (<code>localStorage</code> or <code>sessionStorage</code>) whose items you wish to clear.</p>
<h4 id="heading-example-1-how-to-clear-all-items-from-the-session-storage-object">Example 1: How to clear all items from the session storage object</h4>
<p>Invoke <code>sessionStorage</code>’s <code>clear()</code> method.</p>
<pre><code class="lang-js"><span class="hljs-comment">// Store carColor: "Pink" inside the browser's session storage object:</span>
sessionStorage.setItem(<span class="hljs-string">"carColor"</span>, <span class="hljs-string">"Pink"</span>);

<span class="hljs-comment">// Store pcColor: "Yellow" inside the session storage object:</span>
sessionStorage.setItem(<span class="hljs-string">"pcColor"</span>, <span class="hljs-string">"Yellow"</span>);

<span class="hljs-comment">// Store laptopColor: "White" inside the session storage object:</span>
sessionStorage.setItem(<span class="hljs-string">"laptopColor"</span>, <span class="hljs-string">"White"</span>);

<span class="hljs-comment">// Clear all items from the session storage:</span>
sessionStorage.clear();

<span class="hljs-comment">// Confirm whether the session storage still contains any item:</span>
<span class="hljs-built_in">console</span>.log(sessionStorage);

<span class="hljs-comment">// The invocation above will return:</span>
{<span class="hljs-attr">length</span>: <span class="hljs-number">0</span>}
</code></pre>
<p><a target="_blank" href="https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/clear/js-an86yu"><strong>Try Editing It</strong></a></p>
<h4 id="heading-example-2-how-to-clear-all-items-from-the-local-storage-object">Example 2: How to clear all items from the local storage object</h4>
<p>Invoke <code>localStorage</code>’s <code>clear()</code> method.</p>
<pre><code class="lang-js"><span class="hljs-comment">// Store carColor: "Pink" inside the browser's local storage object:</span>
<span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">"carColor"</span>, <span class="hljs-string">"Pink"</span>);

<span class="hljs-comment">// Store pcColor: "Yellow" inside the local storage object:</span>
<span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">"pcColor"</span>, <span class="hljs-string">"Yellow"</span>);

<span class="hljs-comment">// Store laptopColor: "White" inside the local storage object:</span>
<span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">"laptopColor"</span>, <span class="hljs-string">"White"</span>);

<span class="hljs-comment">// Clear all items from the local storage:</span>
<span class="hljs-built_in">localStorage</span>.clear();

<span class="hljs-comment">// Confirm whether the local storage still contains any item:</span>
<span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">localStorage</span>);

<span class="hljs-comment">// The invocation above will return:</span>
{<span class="hljs-attr">length</span>: <span class="hljs-number">0</span>}
</code></pre>
<p><a target="_blank" href="https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/clear/js-w5vyem"><strong>Try Editing It</strong></a></p>
<p>Now that we know what web storage is and how to access it, we can practice using it in a JavaScript project.</p>
<h2 id="heading-time-to-practice-with-web-storage">Time to Practice with Web Storage 🤸‍♂️🏋️‍♀️</h2>
<p>Consider the following To-Do List app:</p>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/78MRup0PN7c" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<h3 id="heading-the-problem">The Problem</h3>
<p>The issue with the <a target="_blank" href="https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/to-do-app/js-mgl6ie">To-Do List app</a> is this:</p>
<ul>
<li>Tasks disappear whenever users refresh the webpage.</li>
</ul>
<h3 id="heading-your-exercise">Your Exercise</h3>
<p>Use the appropriate Web Storage APIs to accomplish the following tasks:</p>
<ol>
<li>Prevent the Session pane’s To-Do items from disappearing whenever users reload the browser.</li>
<li>Prevent the Local section’s To-Do items from disappearing whenever users reload or close their browser tab (or window).</li>
<li>Auto-display the Session section's previously added tasks on page reload.</li>
<li>Auto-display the Local section's previously added tasks on page reload (or browser reopen).</li>
</ol>
<h3 id="heading-bonus-exercise">Bonus Exercise</h3>
<p>Use your browser’s console to:</p>
<ol>
<li>Check the number of items in your browser’s session storage object.</li>
<li>Display the name of your local storage’s zeroth index item.</li>
<li>Delete all the items in your browser’s session storage.</li>
</ol>
<p><a target="_blank" href="https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/to-do-app/js-mgl6ie"><strong>Try the Web Storage Exercise</strong></a></p>
<p><strong>Note:</strong> You will benefit much more from this tutorial if you attempt the exercise yourself.</p>
<p>If you get stuck, don’t be discouraged. Instead, review the lesson and give it another try.</p>
<p>Once you’ve given it your best shot (you’ll only cheat yourself if you don’t!), we can discuss how I approached the exercise below.</p>
<h2 id="heading-how-did-you-go-about-solving-the-web-storage-exercise">How Did You Go About Solving the Web Storage Exercise?</h2>
<p>Below are feasible ways to get the exercise done.</p>
<h3 id="heading-how-to-prevent-the-session-storage-panes-to-do-items-from-disappearing-on-page-reload">How to prevent the Session Storage pane’s To-Do items from disappearing on page reload</h3>
<p>Whenever users click the “Add task” button,</p>
<ol>
<li>Get existing session storage’s content, if any. Otherwise, return an empty array.</li>
<li>Merge the existing to-do items with the user’s new input.</li>
<li>Add the new to-do list to the browser’s session storage object.</li>
</ol>
<p><strong>Here’s the code:</strong></p>
<pre><code class="lang-js">sessionAddTaskBtn.addEventListener(<span class="hljs-string">'click'</span>, <span class="hljs-function">() =&gt;</span> {
  <span class="hljs-comment">// Get existing session storage's content, if any. Otherwise, return an empty array:</span>
  <span class="hljs-keyword">const</span> currentTodoArray =
    <span class="hljs-built_in">JSON</span>.parse(sessionStorage.getItem(<span class="hljs-string">'codesweetlyStore'</span>)) || [];

  <span class="hljs-comment">// Merge currentTodoArray with the user's new input:</span>
  <span class="hljs-keyword">const</span> newTodoArray = [
    ...currentTodoArray,
    { <span class="hljs-attr">checked</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">text</span>: sessionInputEle.value },
  ];

  <span class="hljs-comment">// Add newTodoArray to the session storage object:</span>
  sessionStorage.setItem(<span class="hljs-string">'codesweetlyStore'</span>, <span class="hljs-built_in">JSON</span>.stringify(newTodoArray));

  <span class="hljs-keyword">const</span> todoLiElements = createTodoLiElements(newTodoArray);
  sessionTodosContainer.replaceChildren(...todoLiElements);
  sessionInputEle.value = <span class="hljs-string">''</span>;
});
</code></pre>
<p><a target="_blank" href="https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/to-do-app/js-txyt66"><strong>Try Editing It</strong></a></p>
<p><strong>Note:</strong> The three dots (<code>...</code>) preceding the <code>currentTodoArray</code> variable represent the <a target="_blank" href="https://codesweetly.com/spread-operator">spread operator</a>. We used it in the <code>newTodoArray</code> object to copy <code>currentTodoArray</code>’s items into <code>newTodoArray</code>.</p>
<h3 id="heading-how-to-prevent-the-local-storage-panes-to-do-items-from-disappearing-on-page-reload-or-reopen">How to prevent the Local Storage pane’s To-Do items from disappearing on page reload or reopen</h3>
<ol>
<li>Get existing local storage’s content, if any. Otherwise, return an empty array.</li>
<li>Merge the existing to-do items with the user’s new input.</li>
<li>Add the new to-do list to the browser’s local storage object.</li>
</ol>
<p><strong>Here’s the code:</strong></p>
<pre><code class="lang-js">localAddTaskBtn.addEventListener(<span class="hljs-string">'click'</span>, <span class="hljs-function">() =&gt;</span> {
  <span class="hljs-comment">// Get existing local storage's content, if any. Otherwise, return an empty array:</span>
  <span class="hljs-keyword">const</span> currentTodoArray =
    <span class="hljs-built_in">JSON</span>.parse(<span class="hljs-built_in">localStorage</span>.getItem(<span class="hljs-string">'codesweetlyStore'</span>)) || [];

  <span class="hljs-comment">// Merge currentTodoArray with the user's new input:</span>
  <span class="hljs-keyword">const</span> newTodoArray = [
    ...currentTodoArray,
    { <span class="hljs-attr">checked</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">text</span>: localInputEle.value },
  ];

  <span class="hljs-comment">// Add newTodoArray to the local storage object:</span>
  sessionStorage.setItem(<span class="hljs-string">'codesweetlyStore'</span>, <span class="hljs-built_in">JSON</span>.stringify(newTodoArray));

  <span class="hljs-keyword">const</span> todoLiElements = createTodoLiElements(newTodoArray);
  localTodosContainer.replaceChildren(...todoLiElements);
  localInputEle.value = <span class="hljs-string">''</span>;
});
</code></pre>
<p><a target="_blank" href="https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/to-do-app/js-dpuffp"><strong>Try Editing It</strong></a></p>
<p><strong>Note:</strong> The <code>localTodosContainer.replaceChildren(...todoLiElements)</code> statement tells the browser to replace <code>localTodosContainer</code>’s current children elements with the list of <code>&lt;li&gt;</code>s in the <code>todoLiElements</code> array.</p>
<h3 id="heading-how-to-auto-display-the-session-sections-previously-added-tasks-on-page-reload">How to auto-display the Session section’s previously added tasks on page reload</h3>
<p>Whenever users reload the page,</p>
<ol>
<li>Get existing session storage’s content, if any. Otherwise, return an empty array.</li>
<li>Use the retrieved content to create <code>&lt;li&gt;</code> elements.</li>
<li>Populate the tasks display space with the <code>&lt;li&gt;</code> elements.</li>
</ol>
<p><strong>Here’s the code:</strong></p>
<pre><code class="lang-js"><span class="hljs-built_in">window</span>.addEventListener(<span class="hljs-string">'load'</span>, <span class="hljs-function">() =&gt;</span> {
  <span class="hljs-comment">// Get existing session storage's content, if any. Otherwise, return an empty array:</span>
  <span class="hljs-keyword">const</span> sessionTodoArray =
    <span class="hljs-built_in">JSON</span>.parse(sessionStorage.getItem(<span class="hljs-string">'codesweetlyStore'</span>)) || [];

  <span class="hljs-comment">// Use the retrieved sessionTodoArray to create &lt;li&gt; elements:</span>
  <span class="hljs-keyword">const</span> todoLiElements = createTodoLiElements(sessionTodoArray);

  <span class="hljs-comment">// Populate the tasks display space with the todoLiElements:</span>
  sessionTodosContainer.replaceChildren(...todoLiElements);
});
</code></pre>
<p><a target="_blank" href="https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/to-do-app/js-zga551"><strong>Try Editing It</strong></a></p>
<h3 id="heading-how-to-auto-display-the-local-sections-previously-added-tasks-on-page-reload-or-reopen">How to auto-display the Local section’s previously added tasks on page reload or reopen</h3>
<p>Whenever users reload or reopen the page,</p>
<ol>
<li>Get existing local storage’s content, if any. Otherwise, return an empty array.</li>
<li>Use the retrieved content to create <code>&lt;li&gt;</code> elements.</li>
<li>Populate the tasks display space with the <code>&lt;li&gt;</code> elements.</li>
</ol>
<p><strong>Here’s the code:</strong></p>
<pre><code class="lang-js"><span class="hljs-built_in">window</span>.addEventListener(<span class="hljs-string">'load'</span>, <span class="hljs-function">() =&gt;</span> {
  <span class="hljs-comment">// Get existing local storage's content, if any. Otherwise, return an empty array:</span>
  <span class="hljs-keyword">const</span> localTodoArray =
    <span class="hljs-built_in">JSON</span>.parse(<span class="hljs-built_in">localStorage</span>.getItem(<span class="hljs-string">'codesweetlyStore'</span>)) || [];

  <span class="hljs-comment">// Use the retrieved localTodoArray to create &lt;li&gt; elements:</span>
  <span class="hljs-keyword">const</span> todoLiElements = createTodoLiElements(localTodoArray);

  <span class="hljs-comment">// Populate the tasks display space with the todoLiElements:</span>
  localTodosContainer.replaceChildren(...todoLiElements);
});
</code></pre>
<p><a target="_blank" href="https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/to-do-app/js-srmnst"><strong>Try Editing It</strong></a></p>
<h3 id="heading-how-to-check-the-total-items-in-the-browsers-session-storage">How to check the total items in the browser’s session storage</h3>
<p>Use session storage’s <code>length</code> property like so:</p>
<pre><code class="lang-js"><span class="hljs-built_in">console</span>.log(sessionStorage.length);
</code></pre>
<p><a target="_blank" href="https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/to-do-app/js-m4pmhf"><strong>Try Editing It</strong></a></p>
<h3 id="heading-how-to-display-the-local-storages-zeroth-index-items-name">How to display the local storage’s zeroth index item’s name</h3>
<p>Use the local storage’s <code>key()</code> method as follows:</p>
<pre><code class="lang-js"><span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">localStorage</span>.key(<span class="hljs-number">0</span>));
</code></pre>
<p><a target="_blank" href="https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/to-do-app/js-th8xr7"><strong>Try Editing It</strong></a></p>
<h3 id="heading-how-to-empty-the-browsers-session-storage">How to empty the browser’s session storage</h3>
<p>Use the session storage’s <code>clear()</code> method as follows:</p>
<pre><code class="lang-js">sessionStorage.clear();
</code></pre>
<h2 id="heading-how-to-continue-practicing-with-web-storage">How to Continue Practicing with Web Storage 🧗‍♀️🚀</h2>
<p>The to-do app still has a lot of potential. For instance, you can:</p>
<ul>
<li>Convert it to a React TypeScript application.</li>
<li>Make it keyboard accessible.</li>
<li>Allow users to delete or edit individual tasks.</li>
<li>Allow users to star (mark as important) specific tasks.</li>
<li>Let users specify due dates.</li>
</ul>
<p>So, feel free to continue developing what we’ve built in this tutorial so you can better understand the web storage objects.</p>
<p>For instance, here’s my attempt at <a target="_blank" href="https://codesweetly.com/try-it-sdk/javascript/web-storage-apis/to-do-app/js-ax8tvk">making the two panes functional</a>:</p>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/gDiU-ubWPD4" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<p>Before we wrap up our discussion, you should know some differences between web storage and cookies. So, let’s talk about that below.</p>
<h2 id="heading-web-storage-vs-cookies-what-is-the-difference">Web Storage vs. Cookies: What is the Difference?</h2>
<p>Web storage and cookies are two main ways to store data locally within a user’s browser. But they work differently. Below are the main distinctions between them.</p>
<h3 id="heading-storage-limit">Storage limit</h3>
<p><strong>Cookies:</strong> Have 4 kilobytes maximum <a target="_blank" href="https://docs.devexpress.com/AspNet/11912/common-concepts/cookies-support#browser-limitations">storage limit</a>.</p>
<p><strong>Web storage:</strong> Can store a lot more than 4 kilobytes of data. For instance, Safari 8 can store up to 5 MB, while Firefox 34 permits 10 MB.</p>
<h3 id="heading-data-transfer-to-the-server">Data transfer to the server</h3>
<p><strong>Cookies:</strong> Transfer data to the server whenever browsers send HTTP requests to the web server.</p>
<p><strong>Web storage:</strong> Never transfers data to the server.</p>
<p><strong>Note:</strong> It is a waste of users’ bandwidth to send data to the server if such information is needed only by the client (browser), not the server.</p>
<h3 id="heading-weak-integrity-and-confidentiality">Weak integrity and confidentiality</h3>
<p><strong>Cookies:</strong> Suffer from <a target="_blank" href="https://datatracker.ietf.org/doc/html/rfc6265#section-8.6">weak integrity</a> and <a target="_blank" href="https://datatracker.ietf.org/doc/html/rfc6265#section-8.5">weak confidentiality</a> issues.</p>
<p><strong>Web storage:</strong> Do not suffer from weak integrity and confidentiality issues because it stores data per <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Glossary/Origin">origin</a>.</p>
<h3 id="heading-property">Property</h3>
<p><strong>Cookies:</strong> Cookies are a property of the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Document"><code>Document</code></a> object.</p>
<p><strong>Web storage:</strong> Web storage is a property of the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Window"><code>Window</code></a> object.</p>
<h3 id="heading-expiration">Expiration</h3>
<p><strong>Cookie:</strong> You can specify a cookie’s expiration date.</p>
<p><strong>Web storage:</strong> Browsers determine web storage’s expiration date.</p>
<h3 id="heading-retrieving-individual-data">Retrieving individual data</h3>
<p><strong>Cookies:</strong> There’s no way to retrieve individual data. You always have to recall all the data to read any single one.</p>
<p><strong>Web storage:</strong> You can choose the specific data you wish to retrieve.</p>
<h3 id="heading-the-syntax-for-storing-data">The syntax for storing data</h3>
<p><strong>Cookies:</strong></p>
<pre><code class="lang-js"><span class="hljs-built_in">document</span>.cookie = <span class="hljs-string">"key=value"</span>;
</code></pre>
<p><strong>Web storage:</strong></p>
<pre><code class="lang-js">webStorageObject.setItem(key, value);
</code></pre>
<h3 id="heading-the-syntax-for-reading-data">The syntax for reading data</h3>
<p><strong>Cookies:</strong></p>
<pre><code class="lang-js"><span class="hljs-built_in">document</span>.cookie;
</code></pre>
<p><strong>Web storage:</strong></p>
<pre><code class="lang-js">webStorageObject.getItem(key);
</code></pre>
<h3 id="heading-the-syntax-for-removing-data">The syntax for removing data</h3>
<p><strong>Cookies:</strong></p>
<pre><code class="lang-js"><span class="hljs-built_in">document</span>.cookie = <span class="hljs-string">"key=; expires=Thu, 01 May 1930 00:00:00 UTC"</span>;
</code></pre>
<p>The snippet above deletes the cookie by assigning an empty value to the <code>key</code> property and setting a past expiration date.</p>
<p><strong>Web storage:</strong></p>
<pre><code class="lang-js">webStorageObject.removeItem(key);
</code></pre>
<h2 id="heading-wrapping-up">Wrapping up</h2>
<p>In this article, we discussed how to use web storage and its built-in interfaces. We also used a to-do list project to practice using the local and session storage objects to store data locally and securely within users’ browsers.</p>
<p>Thanks for reading!</p>
<h3 id="heading-and-heres-a-useful-react-typescript-resource">And here’s a useful React TypeScript resource:</h3>
<p>I wrote a book about <a target="_blank" href="https://amzn.to/3Pa4bI4">Creating NPM Packages</a>!</p>
<p>It is a beginner-friendly book that takes you from zero to creating, testing, and publishing NPM packages like a pro.</p>
<p><a target="_blank" href="https://amzn.to/3Pa4bI4"><img src="https://www.freecodecamp.org/news/content/images/2023/09/creating-npm-package-banner-codesweetly.png" alt="Creating NPM Package Book Now Available at Amazon" width="600" height="400" loading="lazy"></a></p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Cloud Storage Options – Block Storage vs File Storage vs Object Storage Explained ]]>
                </title>
                <description>
                    <![CDATA[ There are three types of storage options offered by most cloud providers: block storage, file storage, and object storage (often referred to as BLOB or Binary Large Object). This tutorial will explain these types of storage, their real-world use case... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/cloud-storage-options/</link>
                <guid isPermaLink="false">66d45e0cf855545810e93425</guid>
                
                    <category>
                        <![CDATA[ Cloud Computing ]]>
                    </category>
                
                    <category>
                        <![CDATA[ storage ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Daniel Adetunji ]]>
                </dc:creator>
                <pubDate>Wed, 26 Jul 2023 17:10:33 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2023/07/pictures.001.jpeg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>There are three types of storage options offered by most cloud providers: block storage, file storage, and object storage (often referred to as BLOB or Binary Large Object).</p>
<p>This tutorial will explain these types of storage, their real-world use cases, and some trade-offs.</p>
<h2 id="heading-what-is-block-storage">What is Block Storage?</h2>
<p>Imagine you have a large bookshelf with many shelves, and each shelf can hold a specific number of pages from a book.</p>
<p>Now, let's say you have a collection of books, but they are all different sizes. To efficiently store these books, you decide to divide them into smaller uniform pieces, called blocks, that fit nicely on the shelves.</p>
<p>Each shelf can only store 100 pages from a book. The Great Gatsby has about 200 pages, so each shelf can only store half the book. Therefore, this single book will be stored in two separate shelves as shown below, with half of the book in one location and the other in another location.</p>
<p><img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F89b745ba-7f4a-4bbd-9a66-08a2670319f4_1798x962.png" alt="Image" width="1456" height="779" loading="lazy"></p>
<p>We have defined a block as the maximum number of pages that can be stored in a shelf. In this example, the block size is 100 pages.</p>
<p>With block storage, data is divided into fixed-size blocks, just like the pages of a book in our analogy. These blocks are usually several thousand bytes.</p>
<p>Each block is assigned a unique address, similar to the location of a specific book (or pages of a book) on a shelf. These addresses allow you to quickly find and access individual blocks of data without having to go through the entire storage.</p>
<p>When you want to store or retrieve data using block storage, you interact with the blocks directly. You can write new data to an empty block or overwrite existing data in a block. If you need to retrieve specific information, you can request the block by its unique address, and it will be returned to you.</p>
<p>Hard disk drives (HDD) and solid state drives (SSD) that are attached to a computer physically or via a network are examples of block storage devices.</p>
<p>The main cloud providers all have block storage options:</p>
<ol>
<li><p>AWS – Elastic Block Storage (EBS)</p>
</li>
<li><p>GCP – Persistent Disks</p>
</li>
<li><p>Azure – Managed Disks</p>
</li>
</ol>
<p>Block storage devices are usually only attached to a single instance. This is one way in which block storage differs from file storage, which I will explain in the next section.</p>
<p>Physically attached block storage is not persistent, meaning it only lasts as long as the instance is not terminated. Network attached block storage persists beyond the life of the instance.</p>
<p>Bringing back the analogy of storing a fixed number of pages from a book in a bookshelf, block storage will allow you to modify or retrieve specific pages without having to handle the entire book.</p>
<p>However, why would you ever need to do this? Isn’t it better to simply have the shelves store a book in its entirety?</p>
<p>For humans, this is certainly preferred. For computers, storing information in blocks has some advantages.</p>
<p>Since block storage presents raw blocks to the compute instance, the instance has flexibility over how the blocks are managed. This is ideal for applications that require high performance and low latency storage like databases, high performance computing applications and ETL (Extract Transform Load), among other applications.</p>
<p>Block storage devices are also used to store the operating system. They are also bootable. “Bootable” simply refers to the ability of a device to start or initiate the process of loading an operating system or software program when a computer is powered on or restarted.</p>
<p>A bootable device contains the necessary files and data that enable a computer to begin its startup sequence and load the operating system into the computer's memory.</p>
<h2 id="heading-what-is-file-storage">What is File Storage?</h2>
<p>Block storage is the lowest level abstraction of storage. It provides a low-level interface where you can read from or write to individual blocks of data. But it does not inherently understand the concept of files, directories, or the hierarchical structure typically associated with file systems.</p>
<p>File storage is an abstraction built on top of block storage. It introduces the concept of files, directories, and a hierarchical structure for organising and managing data.</p>
<p>With file storage, you can group related blocks of data together to form files and organise files within directories. This allows for a more intuitive way to access and manage data, as you can work with files and directories rather than dealing with individual blocks.</p>
<p>Using our bookshelf analogy, with file storage, all you interact with are files and their hierarchies, just like how a book store can organise their books in a structured way to make it easier for customers to find and browse through the selections. Books can be arranged alphabetically by author name, by genre, or a combination of both as shown below.</p>
<p><img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa1bea5d8-3368-4809-bb46-d520357c6934_1406x1014.png" alt="Image" width="1406" height="1014" loading="lazy"></p>
<p>Books can also be further arranged by sub genres (science fiction, fantasy, mystery etc), bestsellers, new releases, books on sale, staff recommendations and children’s books.</p>
<p>Similarly with file storage, you have flexibility over the hierarchical structure which makes it easier for the users (humans or other applications) to access data.</p>
<p>This hierarchical file structure is just an <a target="_blank" href="https://lightcloud.substack.com/p/cloud-computing-abstractions-explained">abstraction</a>. Behind the scenes, the operating system abstracts away the underlying block storage and instead gives the appearance of a file cabinet with a folder-like structure. This simplifies access to applications trying to read or write files on the disk.</p>
<p>Applications don’t need to know the underlying block address to retrieve the files, which makes it easier for the application to interact with the files. This ease of interaction comes with a performance cost, which is acceptable for some use cases.</p>
<p>The main cloud providers all have file storage options:</p>
<ol>
<li><p>AWS – Elastic File Storage (EFS)</p>
</li>
<li><p>GCP – Cloud Filestore</p>
</li>
<li><p>Azure – Azure Files</p>
</li>
</ol>
<p>Unlike block storage, <strong>multiple compute instances can be mounted on the same file storage device.</strong></p>
<h2 id="heading-what-is-object-storage">What is Object Storage?</h2>
<p>This is the newest form of storage on the cloud. Object storage stores all data as objects in a flat structure. There is no hierarchy, unlike in file storage. But an artificial folder-like hierarchy is imparted to block storage to give it the appearance of having a structure.</p>
<p>Object storage is highly scalable. It can store multiple billions of objects. As of 2009, it stored <a target="_blank" href="https://www.allthingsdistributed.com/2009/11/82_billion_objects_in_amazon_s.html">82 billion objects</a>. It would not be a surprise if this has surpassed trillions of objects as of this writing in 2023.</p>
<p>Objects can be any file. It could be video, audio, image, text file, Excel file, word document, HTML, CSS, XML, JSON, and so on.</p>
<p>Object storage is highly durable – that is, there is a very low probability that any object stored there will be lost.</p>
<p>Object storage offered by cloud providers usually provides 99.999999999% durability over a year. This is colloquially referred to as 11 nines of durability.</p>
<p>Durability is defined as the probability of <strong>not</strong> losing an object. A storage system that has a durability of 99.999999999% has a 0.000000001% chance of losing a single object in a year. This means that even if you have a million objects stored in object storage, you are likely to only lose a single object in 100,000 years.</p>
<p>This is a remarkable level of durability that is not matched by the other storage systems.</p>
<p>Naturally, all these probabilities are meaningless if Earth is destroyed, since all the servers storing these objects currently reside on a single planet.</p>
<p>The main cloud providers all have object storage options:</p>
<ol>
<li><p>AWS – S3</p>
</li>
<li><p>GCP – Cloud Storage</p>
</li>
<li><p>Azure – Azure Blob storage</p>
</li>
</ol>
<h2 id="heading-patterns-amp-anti-patterns-when-to-use-each-storage-type">Patterns &amp; Anti-patterns – When to Use Each Storage Type</h2>
<p>The table below summarises the trade-offs between the different storage types plus some use cases.</p>
<p><img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fd05d0204-4368-4ad7-94b7-6598713e23fc_2048x1246.png" alt="Image" width="1456" height="886" loading="lazy"></p>
<p>Note: "Mountable" refers to the capability of connecting or attaching a storage device or file system to a specific location in a computer's file system hierarchy.</p>
<p>When a storage device or file system is "mountable," it means that it can be integrated and made accessible to the operating system and applications running on the computer.</p>
<p>As you can see in the image above, some common use cases for each storage type are as follows:</p>
<ul>
<li><p>Block storage: databases, ETL, high performance computing, OS storage, and boot volume</p>
</li>
<li><p>File storage: sharing files across many compute instances</p>
</li>
<li><p>Object storage: large, scalable, and durable storage of different objects (like images, audio, and video), disaster recovery, and archiving data.</p>
</li>
</ul>
<h2 id="heading-bringing-it-together">Bringing it Together</h2>
<p>Let’s imagine a simple scenario where you would need to use block, file, and object storage together.</p>
<p>Imagine you have been tasked with designing the cloud architecture for a law firm. You need to store a large number of evidence files in different formats (audio, video, image, text, Excel, JSON, and so on).</p>
<p>You need to processes these files, extract the useful information, and make it available for further processing by different people. You also need to make it available for direct use to a team of lawyers in different parts of the world.</p>
<p>From a high level, how could you design such a solution?</p>
<p>You can see how to do this in the image below:</p>
<p><img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3b53e26c-68ee-4f4b-82f4-e8de7d5d66ff_2022x1324.png" alt="Image" width="1456" height="953" loading="lazy"></p>
<p>First, the raw files could be stored using either object storage or file storage. Object storage is preferable because it is lower cost. It is also ideal for low cost archival storage if you need to keep files for several years.</p>
<p>To process the files, you can run multiple applications on an EC2 instance that uses block storage. The other alternative is to use file storage.</p>
<p>Block storage is preferable because these processing tasks may include things like transcribing audio files, extracting text from images, improving and stabilising video files, a database that extracts data in JSON format and stores it in a relational database, and so on. These are all tasks that require higher performance, which is an ideal use case for block storage.</p>
<p>The processed files are then stored in S3 again before they are loaded into a file system with several instances mounted on it.</p>
<p>The up-to-date processed files must be available for further processing or for direct use by a team of lawyers. Block storage is not ideal here because block storage cannot be shared across multiple instances. Object storage is also not ideal because its not mountable (can’t be attached to a compute instance).</p>
<p>In this case, file storage is ideal because it has non of these constraints – it can be shared across multiple instances and it is mountable.</p>
<h2 id="heading-summary">Summary</h2>
<p>In summary, block storage is ideal for high performance applications. File storage is ideal for sharing files across multiple instances.</p>
<p>Like block storage, file storage is mountable – that is, it can be integrated and made accessible to the operating system and applications running on the instance.</p>
<p>Object storage is ideal for low cost durable and scalable storage where high performance is not important.</p>
<p>Thank you for reading!</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to Manage Data Storage ]]>
                </title>
                <description>
                    <![CDATA[ We've all been at this 21st Century thing for a while. And by now it's pretty clear that data is the big driver of, well, of everything.  Governments build their policies around economic and population data. Scientists build their theories around env... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-manage-data-storage/</link>
                <guid isPermaLink="false">66b995ef7bb37b73c3f3c4e2</guid>
                
                    <category>
                        <![CDATA[ data ]]>
                    </category>
                
                    <category>
                        <![CDATA[ database ]]>
                    </category>
                
                    <category>
                        <![CDATA[ storage ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ David Clinton ]]>
                </dc:creator>
                <pubDate>Tue, 14 Feb 2023 19:44:28 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2023/02/pexels-tima-miroshnichenko-6549629.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>We've all been at this 21st Century thing for a while. And by now it's pretty clear that data is the big driver of, well, of everything. </p>
<p>Governments build their policies around economic and population data. Scientists build their theories around environmental, physical, and biological data. Businesses build their plans around production, sales, and consumer behavior data.</p>
<p>This article was taken from the book, <a target="_blank" href="https://amzn.to/3FXXAfb">Keeping Up: Backgrounders to All the Big Technology Trends You Can't Afford to Ignore</a>. If you'd prefer to watch this chapter as a video, feel free to follow along here:</p>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/JvoguWXO-lg" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<p>Data is being generated at rates previously undreamed of. I've read that the sensors on a pair of General Electric GEnx engines on a Boeing 787 Dreamliner generate a terabyte of data each day. </p>
<p>A single network-connected car (like a Tesla) might upload around 100MB of location, performance, and maintenance-related data on any average day. </p>
<p>Multiply that by the millions of such cars that will soon be in use around the world, and multiply <em>that</em> number by the thousands of other devices that are out there, and the scale of the data "problem" should be clear.</p>
<p>Got plans to add your own data to the flood and you feel the need to save and store it, too? You'll need to be able to explain why you need it so you'll know how it should be done. </p>
<p>I can't help you with that "why," but I think I can give you some useful thoughts about the "how."</p>
<p>The <em>way</em> you store data will depend on what it looks like as it's produced and how you may need to access it later. <em>Where</em> you store your data will depend on how much of it there is, how deeply you'd be impacted by its loss, and how often you'll need to take it out and play with it. Let's take a look at both of those variables.</p>
<h1 id="heading-data-storage-formats">Data Storage Formats</h1>
<p>Since not all data is created equal, it'll make sense to look for the tools and environments that'll most closely match the work you're planning to do. Here are some options:</p>
<h2 id="heading-spreadsheets">Spreadsheets</h2>
<p>They may be flashy, colorful, consumer-facing applications, but spreadsheets are no lightweights when it comes to serious data processing. </p>
<p>As we'll see in more detail a bit later, spreadsheets have their limitations. But when it comes to presenting data in visually accessible ways, applying mathematical, statistical, and financial operations to that data, and even integrating remote data sources (like stock market quotes), no other tool comes close.</p>
<p>Spreadsheets can import simple, plain text data from files of just about any size as long as the text can be delimited. That is, breaks between data divisions should be marked by some consistent character. </p>
<p>When you import the data, you can specify the appropriate delimiter. Tabs, hard returns, and commas are common delimiting characters. In fact, the popular acronym <em>CSV</em> stands for <em>comma-separated values.</em> </p>
<p>Here's what a few lines of CSV text might look like. Note that the first row contains column headings. Spreadsheets can easily understand how those should be treated differently.</p>
<pre><code>Year,Volume,Rate,Growth
<span class="hljs-number">2015</span>,<span class="hljs-number">56</span>,<span class="hljs-number">10</span>,<span class="hljs-number">15</span>
<span class="hljs-number">2020</span>,<span class="hljs-number">90</span>,<span class="hljs-number">11</span>,(<span class="hljs-number">2</span>)
<span class="hljs-number">2022</span>,<span class="hljs-number">109</span>,<span class="hljs-number">8</span>,<span class="hljs-number">12</span>
</code></pre><p>Spreadsheets display their data in cells, which are arranged into horizontal rows and vertical columns. You an apply functions to the contents of individual cells or to some or all of the cells in a column or row, and can incorporate values in cells in relative locations. </p>
<p>Data sets within a spreadsheet can be rendered as graphs. Spreadsheets can also be used as web forms where users can input data that's saved for future use.</p>
<p>The most popular spreadsheet is probably Microsoft's Excel, which is part of their Microsoft 365 Office Suite. But feature for feature, the open source Calc that comes with the LibreOffice suite is a viable alternative. Google Sheets is a cloud-based spreadsheet solution that may lack some of the feature depth of the others, but is a strong collaboration tool.</p>
<h2 id="heading-databases">Databases</h2>
<p>As a rule, databases are not built for visualizing data in attractive and intuitive formats. And, on their own, they're not known for complex mathematical calculations either. But boy, can they handle extra-large data sets and multi-table relationships.</p>
<p>When I say that databases don't really help you visualize your data, that's generally because they're meant to be used "behind" front end applications in multi-tier deployments.</p>
<p>For instance, an e-commerce website will display web pages where users can browse what you've got for sale, add items to a virtual shopping cart, and check out using their payment information. </p>
<p>The web page itself just draws a graphical interface and shows you where to click your mouse, but the information about the items you're selling - including their price and associated images - are probably retrieved from a backend database whenever the page loads.</p>
<p>Similarly, your selections and, eventually, payment information will be written to a different database. The software process that handles your shipping might later consult the payment database for the shipping address. Databases are there at every stage, but no one will ever actually see them.</p>
<p>Administrating large databases so they're efficient, secure, and reliable takes serious engineering and, in some cases, an enormous amount of money. </p>
<p>Before you build your database deployment, you'll need to know whether your operation requires strong Atomicity, Consistency, Isolation, and Durability (ACID) and support for complex and flexible queries. If it does, you may be looking for a relational database engine like SQL Server, MariaDB, or Amazon's Aurora. </p>
<p>Or perhaps you need speedy performance and would prefer a more flexible schema-less environment (suggesting you'd be better off with a NoSQL solution, like MongoDB or Redis).</p>
<p><em>SQL</em>, by the way, stands for <em>structured query language</em> - which is an established syntax for using language-like code for interacting with your data.</p>
<p>Counterintuitively, depending on who you ask, <em>NoSQL</em> might not stand for <em>Not SQL</em>. Some prefer to think of it as <em>Not Only SQL</em> instead.</p>
<h2 id="heading-jupyter-notebook">Jupyter Notebook</h2>
<p>Don't think you have to consume your data using the same tool that's storing it. It's possible, for example, to import existing data that's stored either locally or at a remote site into an interactive compute environment like a Jupyter Notebook. </p>
<p>The advantage of this kind of setup is that the data can now be addressed within the context of, say, a robust Python programming environment without actually touching - or potentially corrupting - the original source.</p>
<p>The open source JupyterLab is a popular resource for working with large data sets using Python. You can download and build your own JupyterLab or run it remotely through a cloud provider like Amazon's Elastic Map Reduce service, or Microsoft's Azure Notebooks. </p>
<p>For particularly large data sets - especially those that already live in the cloud - an existing cloud platform can make sense.</p>
<h1 id="heading-data-storage-devices">Data Storage Devices</h1>
<p>Although it's not quite this simple, let's say that there are four broad categories of data storage media drives:</p>
<ul>
<li>Magnetic tape on open reels, cartridges, or cassettes</li>
<li>Optical including Compact Disk (CD) and Digital Video Disc (DVD)</li>
<li>Magnetic media in 2.5 and 3.5 inch drive casing - including spinning hard drives</li>
<li>Solid state including SSD drives in 2.5 and 3.5 inch drive casing, SD cards, and USB flash drives</li>
</ul>
<p>A few magnetic tape systems may still exist here and there, but the days of laboriously and slowly copying large data sets to banks of multiple backup tapes - and hoping the backup would actually work - are pretty much over. Trust me: no one is complaining. </p>
<p>CDs and DVDs are headed the same direction. Their maximum capacities are no match for the sheer volume of today's enterprise data needs, and consumers don't make local copies of nearly as many large media files as they once did.</p>
<p>Which leaves spinning magnetic and solid state drives.</p>
<p>Gigabyte for gigabyte, spinning hard drives are probably still a bit less expensive than their solid state equivalents (although the price difference is narrowing), but the performance gains delivered by SSDs are very noticeable. </p>
<p>Some time ago, I realized that I could actually <em>save</em> money by buying smaller capacity SSDs for my personal workstations and laptops instead of larger hard disk drives (HDDs).</p>
<p>Let me explain. The way we use data on our personal computers has changed in recent years. Rather than storing media and software archives locally, we're much more likely to assume they'll be available to stream or download whenever we need them. </p>
<p>For most of us, faster download speeds have made "living in the cloud" easy. So we normally just don't need as much storage space any more. </p>
<p>The 500GB SSD drive plugged into my busy workstation is barely half full - even taking into account the dozen or so virtual machines and the many ISO images I've got there. And the drive cost me less than I would have paid for a one or two terabyte HDD.</p>
<p>One of the primary roles of storage is data backup. Rather than physically transferring backups between media, local data archiving - using either SSD or HDD media - generally works by moving archives across networks. </p>
<p>The trick is designing a backup system that automatically provides you with sufficient duplicates of your archives, rotates them through appropriate life cycles (where, eventually, they're retired and destroyed), and all without generating unnecessary network traffic overhead.</p>
<p>Besides backups, you'll also often want to share data among users working throughout your campus. </p>
<p>Two tools for managing both backups and file sharing are network-attached storage (NAS) and storage area networks (SAN). Their similar names suggest they're in the same business. Trust me: they're not.</p>
<h2 id="heading-network-attached-storage-nas">Network-attached storage (NAS)</h2>
<p>NAS is a relatively simple and inexpensive way to share files across a local network. It works through a standalone server device that contains multiple storage drives. The drives will normally be configured as a Redundant array of inexpensive disks (RAID) array to provide redundancy and performance benefits.</p>
<p>The NAS device connects to the network over ethernet cabling and uses regular TCP/IP networking. Client machines in the LAN will see the NAS resources through standard file sharing protocols like Server Message Block (SMB) and Network File System (NFS).</p>
<p>NAS solutions can be great for smaller home or office environments, but the fun will quickly fade as you grow. NAS devices themselves are generally not powerful enough to handle too much of a client workload, and working with large files over an ethernet network may slow things down.</p>
<h2 id="heading-storage-area-network-san">Storage area network (SAN)</h2>
<p>If NAS setups are "relatively simple and inexpensive," SANs are complex and expensive. Not by accident were they designed for large enterprise deployments. As a result of the high end hardware you throw into a NAS system, performance will be great and you'll scale much further.</p>
<p>Rather than ethernet, SANs run through much faster Fibre Channel switches (or, sometimes, the slower iSCSI). They provide block-based storage rather than file systems and are mounted on client machines as local drives.</p>
<h1 id="heading-data-storage-services">Data Storage Services</h1>
<p>As internet connection speeds have improved, it's become more practical to move at least some data archives to the cloud. </p>
<p>Instead of local backups - which could be lost in a catastrophic event like a fire - data could regularly be saved to online platforms. Once there, you'd have a viable, off-site backup. But, if you wanted, you'd also have access to that data from anywhere on earth. If you work remotely with a distributed team, that can be helpful.</p>
<p>You probably already own and have even collaborated on documents that live on Dropbox, Microsoft 365, or Google Drive. For most people, the primary point of interaction for those services is a web browser. </p>
<p>But serious data management - or even relatively complex and regular file backups - aren't practical within a browser. So cloud computing providers offer storage and archiving services whose administration can be scripted and automated.</p>
<p>Cloud storage services, like Amazon's Simple Storage Service (S3), provide full archive life cycle management. Data that must remain highly available could, for example, be saved to the S3 Standard storage class. </p>
<p>After a few months - when you're less likely to need the data, but must still retain a copy for regulatory reasons - you could move your archive to the cheaper S3 Glacier class. Data in Glacier is secure and durable, but would take much longer to access. </p>
<p>After a full year you might be able to delete it altogether. Better yet, there are simple ways to automate the way your data moves through its life cycle.</p>
<p>All major cloud providers will have their own comparable data storage services. Naturally, prices and exact service features will differ from one another. And, of course, feature and pricing details will often change.</p>
<p>It may not always be practical to transfer data to the cloud over the internet. Extremely large data sets can take a very long time to upload even using fast internet connections. </p>
<p>Sure, if you're lucky enough to have a fibre optics connection giving you one gigabyte/second, then a one terabyte upload would take only two and a half hours or so (assuming no one else was using the connection).</p>
<p>But what about 100 TBs of data (that'll take you more than ten days)? And what if you only get 100MB/second (more than three months)? In cases like these, if you're uploading jumbo-sized archives weekly or have other uses for your internet connection, then uploading isn't an option.</p>
<p>For such cases, you can still get your data into the cloud, but it'll have to find another ride. AWS, as it turns out, offers their Snow Family services. </p>
<p>Snowball is a large, secure storage device. It can be safely shipped to AWS customers, loaded up with dozens of terabytes of data, and then shipped back. Once back home at Amazon, the data will be directly uploaded to a bucket in the customer's account. Alternatively, Snowballs can be kept on-location and used as edge compute devices.</p>
<p>Snowball's big brother is AWS Snowmobile, a 45-foot long secure shipping container capable of handling Exabyte-scale digital migration. </p>
<p>Snowball's little cousin, AWS Snowcone, is a rugged container the size of a tissue box that can handle eight TB of usable storage, along with the possibility of virtual cloud instances and network connectivity to the AWS cloud. Besides transferring your data, Snowcones can be used as highly mobile edge compute devices in their own right.</p>
<p>And that's it for today. Thank you for reading. Now, hopefully you better understand how we store data and what your data storage options are.</p>
<p><em>YouTube videos of all ten chapters from this book <a target="_blank" href="https://www.youtube.com/playlist?list=PLSiZCpRYoTZ6UWl4xialvwLOKyHYYJUiC">are available here</a>. Lots more tech goodness - in the form of books, courses, and articles - <a target="_blank" href="https://bootstrap-it.com">can be had here</a>. And consider taking my <a target="_blank" href="https://www.udemy.com/user/david-clinton-12/">AWS, security, and container technology courses here</a>.</em></p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How Web Storage Works – Local vs Session Storage Explained ]]>
                </title>
                <description>
                    <![CDATA[ Anyone who works with the web needs to store data for a later use. Backend developers have some powerful databases in their toolkit. But if you are a frontend developer, you can still store and process data using web storage. In this article, you'll ... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-web-storage-works/</link>
                <guid isPermaLink="false">66bf4ac87df110118a932070</guid>
                
                    <category>
                        <![CDATA[ data ]]>
                    </category>
                
                    <category>
                        <![CDATA[ localstorage ]]>
                    </category>
                
                    <category>
                        <![CDATA[ storage ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Tooba Jamal ]]>
                </dc:creator>
                <pubDate>Wed, 12 Oct 2022 14:08:46 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2022/10/webstorage-1-1.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Anyone who works with the web needs to store data for a later use. Backend developers have some powerful databases in their toolkit. But if you are a frontend developer, you can still store and process data using web storage.</p>
<p>In this article, you'll learn what is a web storage, the different types of web storage, and when to use each one of them.</p>
<h2 id="heading-what-is-web-storage">What is Web Storage?</h2>
<p>Web storage is an HTML5 feature that allows you to store data in key value pairs in the browser. This enables applications to store data in the client side so you can access it or manipulate it later. All data stored in web storage stays in the browser and is not transferred anywhere else.</p>
<h2 id="heading-types-of-web-storage">Types of web storage</h2>
<p>The two main types of web storage are‌‌ local storage‌‌ and session storage‌‌. Each one has its own unique characteristics. </p>
<p>But one thing they have in common is that they store the data in the particular browser the user uses to access the webpage. You won't be able to access the same data through another browser. </p>
<p>Now let's discuss both of them in detail.</p>
<h3 id="heading-local-storage">Local Storage</h3>
<p>Local storage can store 5MB of data per app for the lifetime of the app. Closing the browser will not affect the data in any way – it stays there unless you delete it. </p>
<p>You can only access the local storage object through <code>localStorage</code>. The methods you can use to perform operations on the localStorage object are:</p>
<pre><code class="lang-javascript"><span class="hljs-built_in">localStorage</span> <span class="hljs-comment">// to access the localStorage object </span>
<span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">'name'</span>, <span class="hljs-string">'John'</span>) <span class="hljs-comment">// sets name equal to john localStorage.getItem('name') // "John" </span>
<span class="hljs-built_in">localStorage</span>.removeItem(<span class="hljs-string">'name'</span>) <span class="hljs-comment">// removes name from the localStorage localStorage.clear() // clears the localStorage</span>
</code></pre>
<p><code>localStorage.setItem()</code> takes a key and value as parameters and sets a new item in the local storage object equal to the given key value pair. </p>
<p><code>localStorage.getItem()</code> takes a key as a parameter and returns the value stored to that key in the storage. </p>
<p><code>localStorage.clear()</code> clears the whole localStorage object.</p>
<p><code>localStorage.removeItem()</code> takes in a key as a parameter and removes the corresponding key-value pair. ‌‌</p>
<p>Any item that you store in localStorage will be stored as a string. This means that you need to convert other data types such as arrays or objects to strings – otherwise you lose their structure. </p>
<p>See the example below:       </p>
<pre><code class="lang-javascript"><span class="hljs-keyword">const</span> scores = [<span class="hljs-number">10</span>, <span class="hljs-number">8</span>, <span class="hljs-number">6</span>, <span class="hljs-number">3</span>, <span class="hljs-number">9</span>] 
<span class="hljs-keyword">const</span> scoresJSON = <span class="hljs-built_in">JSON</span>.stringify(scores) 
<span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">'scores'</span>, scoresJSON) 
<span class="hljs-built_in">localStorage</span> <span class="hljs-comment">// output &gt;&gt; {scores: '[10, 8, 6, 3, 9]', length: 1}</span>
</code></pre>
<p>In the example above, we first created an array score, then converted it into a string using JSON.stringify(), and finally saved the stringified scores array in localStorage. </p>
<p>Take your time to have a look at the output I get when I run the same code snippet in my browser console.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2022/10/localstorage-3.png" alt="Image" width="600" height="400" loading="lazy">
<em>Example code in browser console</em></p>
<p>Note that the key scores has a value equal to our stringified scores array. But if we don't convert the scores array into a string, our array will loose it's structure and the items will be saved as a string like below:</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">const</span> scores = [<span class="hljs-number">10</span>, <span class="hljs-number">8</span>, <span class="hljs-number">6</span>, <span class="hljs-number">3</span>, <span class="hljs-number">9</span>] 
<span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">'scores'</span>, scores) 
<span class="hljs-built_in">localStorage</span> <span class="hljs-comment">// output &gt;&gt; {scores: '10, 8, 6, 3, 9', length: 1}</span>
</code></pre>
<p>Let's also run the code in the browser console to see what is logs to the console:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2022/10/localstorage-2.png" alt="Image" width="600" height="400" loading="lazy">
<em>Saving an array without converting it into a string</em></p>
<p>See how our scores array is converted into a string when we do not convert it into a string using JSON.stringify()?</p>
<h3 id="heading-session-storage">Session Storage</h3>
<p>Session storage allows you to store data in the browser depending on the system memory and the data stored in the browser until the browser is closed. In other words, closing the browser will clear all the data stored in session storage. </p>
<p>Like localStorage, you can access session storage by typing sessionStorage in the browser console.</p>
<pre><code class="lang-javascript">sessionStorage <span class="hljs-comment">// access the session storage </span>
sessionStorage.setItem(<span class="hljs-string">'name'</span>, <span class="hljs-string">'John'</span>) <span class="hljs-comment">// add name to session storage with value john </span>
sessionStorage.getItem(<span class="hljs-string">'name'</span>) <span class="hljs-comment">// get the name item from session storage sessionStorage.removeItem('name') // remove name item from the session storage sessionStorage.clear() // clear the session storage</span>
</code></pre>
<p><code>sessionStorage.setItem()</code> takes a key and value as parameters and sets a new item in the local storage object equal to the given key value pair.</p>
<p><code>sessionStorage.getItem()</code> takes key as a parameter and returns the value stored to that key in the storage. </p>
<p><code>sessionStorage.removeItem()</code> takes in a key as parameter and removes the corresponding key-value pair. </p>
<p><code>sessionStorage.clear()</code> clears the whole localStorage object. ‌‌</p>
<p>Like localStorage, any item stored in sessionStorage will be stored as a string. This means we need to convert them into strings before storing in the sessionStorage.</p>
<h2 id="heading-web-storage-example-use-cases">Web Storage Example Use Cases</h2>
<p>You can use <strong>local storage</strong> when you want your data to be made available when the user revisits the web page, such as for a shopping cart or game/quiz score. Just keep in mind that the information saved in local storage should not be sensitive.‌‌</p>
<p>You can use <strong>session storage</strong> when the data that needs to be saved is sensitive. User authentication is an example of data that you would like to clear as soon as the user closes the tab.</p>
<h2 id="heading-conclusion">Conclusion</h2>
<p>In this article, you have learned the modern ways of storing temporary data in the browser. I hope this has helped you understand how and when to use both types of web storage in your projects. </p>
<p>Interested in connecting on LinkedIn? Hit me up at <a target="_blank" href="https://www.linkedin.com/in/tooba-jamal/">Tooba Jamal</a>.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Types of Hard Drives – SATA, PATA, SCSI, and SSD ]]>
                </title>
                <description>
                    <![CDATA[ A hard drive is a non-volatile hardware component on a computer that acts as the storage for all digital content. It holds program files, documents, pictures, videos, music, and more. The non-volatile nature of hard drives means they don’t lose data,... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/types-of-hard-drives-sata-pata-scsi-and-more-2/</link>
                <guid isPermaLink="false">66adf2418c7074f6c4885238</guid>
                
                    <category>
                        <![CDATA[ hardware ]]>
                    </category>
                
                    <category>
                        <![CDATA[ storage ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Kolade Chris ]]>
                </dc:creator>
                <pubDate>Mon, 04 Apr 2022 23:17:35 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2022/04/hard-drive-1110813_1280.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>A hard drive is a non-volatile hardware component on a computer that acts as the storage for all digital content. It holds program files, documents, pictures, videos, music, and more.</p>
<p>The non-volatile nature of hard drives means they don’t lose data, even if power is lost. Due to this, they help computers store files and other data for a long time – as long as they don’t get damaged or corrupted.</p>
<p>Since the first release of hard drives by IBM in 1956, hard drives have evolved from being the size of a refrigerator and having a storage capacity of just 5MB to ones that are pocket-sized and have up to 4 TB of storage capacity.</p>
<p>In this article, I will cover the different types of hard drives so you can choose the best for your computer.</p>
<p>But firstly, let's look at interfaces – the connecting part between the computer and the hard drive.</p>
<h2 id="heading-types-of-interfaces">Types of Interfaces</h2>
<ul>
<li>Parallel Advanced Technology Attachment (PATA)</li>
<li>Serial Advanced Technology Attachment (SATA)</li>
<li>Small Computer System Interface (SCSI)</li>
<li>NVMe (Non-volatile Memory Express)</li>
</ul>
<p>These names come from the way they connect to the computer. So, there are PATA hard drives, SATA hard drives, SCSI hard drives, and NVMe drives.</p>
<p>In this article, I’m now going to elaborate on each of these interfaces and types of hard drives as concisely as possible.</p>
<h3 id="heading-parallel-advanced-technology-attachment-pata">Parallel Advanced Technology Attachment (PATA)</h3>
<p>The PATA interfaces were first introduced to the market by Compaq and Western Digital in 1986. They can have up to 80GB capacity and transfer data as fast as 133 MB/S.</p>
<p>They were named Parallel Advanced Technology Attachment because they use a parallel ATA interface to connect to the computer. Apart from PATA, they are also called Integrated Drive Electronics (IDE) and Enhanced Integrated Drive Electronics (EIDE).</p>
<p>PATA interfaces are made of mechanical moving parts and are based on parallel signaling technology – meaning they transmit multiple bits of data simultaneously.</p>
<h3 id="heading-serial-advanced-technology-attachment-sata">Serial Advanced Technology Attachment (SATA)</h3>
<p>In recent times, a lot of desktop and laptop computers have gotten SATA interfaces because they have superseded PATA interfaces in size, power consumption, and even better pricing.</p>
<p>The mode of connection to a computer remains the same as PATA, but instead of parallel signaling technology for data transmission, they use serial signaling technology. This means that they transfer data one bit at a time.</p>
<p>A notable advantage SATA interfaces have over PATA interfaces is the transmission of data at a rate of 150 – 300 MB/S. In addition, they have thinner cables and a cable limit of 1 meter.</p>
<h3 id="heading-small-computer-system-interface-scsi">Small Computer System Interface (SCSI)</h3>
<p>SCSI interface is an upgrade over SATA and PATA interfaces for many reasons such as round-the-clock operations, speed, storage, and several others.</p>
<p>For connection, SCSI hard drives use a small computer system interface – which is a standard for connecting peripheral devices such as printers, scanners, and others.</p>
<p>Best of all, they allow the connection of peripheral devices such as printers, scanners, and other hard drives. In addition, they transmit data at 320 MB/S and you can connect them internally or externally.</p>
<p>Connections through SCSI on personal computers have now been replaced by the Universal Serial BUS (USB). This means that SCSI is no longer used as consumer hardware.</p>
<h3 id="heading-nvme-non-volatile-memory-express">NVMe (Non-volatile Memory Express)</h3>
<p>NVMe interface is a revolution. It is built for high demanding and computing-intensive tasks So, it is an upgrade over the interfaces already discussed.</p>
<p>Because of its high performance and scalability, you'll find it mostly in data centers and newer computers. There are now SSDs using the NVMe interface.</p>
<p>Its many advantages over other interfaces are:</p>
<ul>
<li>lower power consumption</li>
<li>multiple command queues</li>
<li>reduced latency and input/output overhead – leading to better performance</li>
<li>utilization of CPU to full potential</li>
</ul>
<p>One of the disadvantages of NVMe interfaces is that they're more expensive than other interfaces.</p>
<h2 id="heading-types-of-hard-drives">Types of Hard Drives</h2>
<p>Currently, there are two common types of hard drive:</p>
<ul>
<li>Hard Disk Drive (HDD)</li>
<li>Solid State Drive (SSD)</li>
</ul>
<p>A hard drive utilizes any of the interfaces such as PATA, SATA, SCSI. Today, there are SSDs that utilize the NVMe interface.</p>
<p>Let's look at the two types of hard drives in detail.</p>
<h3 id="heading-hard-disk-drive-hdd">Hard Disk Drive (HDD)</h3>
<p>Hard disk drives are not that new and you will find them installed in older computers. They consist of a moving part that rotates during reading and writing operations, so they usually make noise.</p>
<p>These days, you may not see many newer desktop and laptop computers with hard disk drives, but they remain popular because of their storage space. 16 GB, 32 GB, and 64 GB are the lowest you can find out there. There are 500 GB, 1 TB, 2TB, and more than 4 TB hard drives.</p>
<p>This enormous storage space is the reason hard disk drives may go nowhere any time soon. There are even external hard disk drives you can use to backup your files.</p>
<h3 id="heading-solid-state-drive-ssd">Solid State Drive (SSD)</h3>
<p>SSD hard drives are one of the latest hard drive technologies at the time of writing this article. Most newer computers have SSDs instead of HDDs.</p>
<p>Unlike the hard drive technologies before SSD drives, they don’t consist of moving parts and they don’t use magnetism for storing data. So, they don't make noise like hard disk drives (HDDs).</p>
<p>Instead, they use integrated circuits (ICs) just like third-generation computers. This makes them more durable, faster, and less prone to damage and corruption.</p>
<p>SSD hard drives have a notable advantage of transferring data at speed of 550 MB/S and allow faster boot times than the types of hard drives before them.</p>
<p>Solid state drives also have enormous sizes, but they are very expensive when compared to hard disk drives.</p>
<h2 id="heading-conclusion">Conclusion</h2>
<p>This article explained what different types of hard drives are and how they work, so you can learn more about hard drives and choose the best one for your needs.</p>
<p>From PATA to SATA, SCSI and NVMe, hard drive interfaces continue to evolve and research to make better ones is ongoing.</p>
<p>There is a new variation of SSD hard drives called NVMe (Non-volatile Memory Express) SSDs that has the capacity to transfer data as fast as 3.5 GB/S. This makes them the best choice for video editing and high-resolution gaming, though they require more power than the actual SSDs.</p>
<p>Thank you for reading.</p>
<p>If you find this article helpful, don’t hesitate to share it with your friends and family.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ What Is a File System? Types of Computer File Systems and How they Work – Explained with Examples ]]>
                </title>
                <description>
                    <![CDATA[ By Reza Lavarian It's a bit tricky to explain what exactly a file system is in just one sentence. That's why I decided to write an article about it. This post is meant to be a high-level overview of file systems. But I'll sneak into the lower-level c... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/file-systems-architecture-explained/</link>
                <guid isPermaLink="false">66d460c5c7632f8bfbf1e48d</guid>
                
                    <category>
                        <![CDATA[ Computer Science ]]>
                    </category>
                
                    <category>
                        <![CDATA[ software architecture ]]>
                    </category>
                
                    <category>
                        <![CDATA[ storage ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Tue, 11 Jan 2022 16:49:00 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2021/02/pexels-photo-6571015.jpeg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Reza Lavarian</p>
<p>It's a bit tricky to explain what exactly a file system is in just one sentence.</p>
<p>That's why I decided to write an article about it. This post is meant to be a high-level overview of file systems. But I'll sneak into the lower-level concepts as well, as long as it doesn't get boring. :)</p>
<h2 id="heading-what-is-a-file-system">What is a file system?</h2>
<p>Let's start with a simple definition:</p>
<p>A  <strong>file system</strong>  defines how files are  <strong>named</strong>,  <strong>stored</strong>, and  <strong>retrieved</strong>  from a storage device.</p>
<p>Every time you open a file on your computer or smart device, your operating system uses its file system internally to load it from the storage device.</p>
<p>Or when you copy, edit, or delete a file, the file system handles it under the hood.</p>
<p>Whenever you download a file or access a web page over the Internet, a file system is involved too.</p>
<p>For instance, if you access a page on <a target="_blank" href="https://www.freecodecamp.org/">freeCodeCamp</a>, your browser sends an <a target="_blank" href="https://www.decodingweb.dev/books/decoding-web-development/http">HTTP</a> request to freeCodeCamp's server to fetch the page. If the requested resource is a file, it's fetched from a file system.</p>
<p>When people talk about file systems, they might refer to different aspects of a file system depending on the context - that's where things start to seem knotty.</p>
<p>And you might end up asking yourself, WHAT IS A FILE SYSTEM ANYWAY? 🤯</p>
<p>This guide helps you understand file systems in many contexts. I'll cover partitioning and booting too!</p>
<p>To keep this guide manageable, I'll concentrate on Unix-like environments when explaining the lower-level concepts or console commands.</p>
<p>However, these concepts remain relevant to other environments and file systems.</p>
<h3 id="heading-why-do-we-need-a-file-system-in-the-first-place-you-may-ask">Why do we need a file system in the first place, you may ask?</h3>
<p>Well, without a file system, the storage device would contain a big chunk of data stored back to back, and the operating system wouldn't be able to tell them apart.</p>
<p>The term file system takes its name from the old paper-based data management systems, where we kept documents as files and put them into directories.</p>
<p>Imagine a room with piles of papers scattered all over the place.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/02/pexels-photo-6571015-1.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>A storage device without a file system would be in the same situation - and it would be a useless electronic device.</p>
<p>However, a file system changes everything:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/02/pexels-photo-6571015-2.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>A file system isn't just a bookkeeping feature, though.</p>
<p>Space management, metadata, data encryption, file access control, and data integrity are the responsibilities of the file system too.</p>
<h2 id="heading-everything-begins-with-partitioning">Everything begins with partitioning</h2>
<p>Storage devices must be  <strong>partitioned</strong>  and  <strong>formatted</strong>  before the first use.</p>
<p>But what is partitioning?</p>
<p>Partitioning is splitting a storage device into several  <em>logical regions</em>, so they can be managed separately as if they are separate storage devices.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/02/partitions.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>We usually do partitioning by a disk management tool provided by operating systems, or as a command-line tool provided by the system's firmware (I'll explain what firmware is).</p>
<p>A storage device should have at least one partition or more if needed.</p>
<p>Why should we split the storage devices into multiple partitions anyways?</p>
<p>The reason is that we don't want to manage the whole storage space as a single unit and for a single purpose.</p>
<p>It's just like how we partition our workspace, to separate (and isolate) meeting rooms, conference rooms, and various teams.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/02/office-space.jpeg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>For example, a basic Linux installation has three partitions: one partition dedicated to the operating system, one for the users' files, and an optional swap partition.</p>
<p>A swap partition works as the RAM extension when RAM runs out of space.</p>
<p>For instance, the OS might move a chunk of data (temporarily) from RAM to the swap partition to free up some space on the RAM.</p>
<p>Operating systems continuously use various <a target="_blank" href="https://www.decodingweb.dev/books/processing-fundamentals/operating-systems-and-memory-management">memory management</a> techniques to ensure every process has enough memory space to run.</p>
<p>File systems on Windows and Mac have a similar layout, but they don't use a dedicated swap partition; Instead, they manage to swap within the partition on which you've installed your operating system.</p>
<p>On a computer with multiple partitions, you can install several operating systems, and every time choose a different operating system to boot up your system with.</p>
<p>The recovery and diagnostic utilities reside in dedicated partitions too.</p>
<p>For instance, to boot up a MacBook in recovery mode, you need to hold  <code>Command + R</code>  as soon as you restart (or turn on) your MacBook. By doing so, you instruct the system's firmware to boot up with a partition that contains the recovery program.</p>
<p>Partitioning isn't just a way of installing multiple operating systems and tools, though; It also helps us keep critical system files apart from ordinary ones.</p>
<p>So no matter how many games you install on your computer, it won't have any effect on the operating system's performance - since they reside in different partitions.</p>
<p>Back to the office example, having a call center and a tech team in a common area would harm both teams' productivity because each team has its own requirements to be efficient.</p>
<p>For instance, the tech team would appreciate a quieter area.</p>
<p>Some operating systems, like Windows, assign a drive letter (A, B, C, or D) to the partitions. For instance, the  <em>primary partition</em>  on Windows (on which Windows is installed) is known as  <strong>C</strong>:, or <strong>drive C</strong>.</p>
<p>In Unix-like operating systems, however, partitions appear as ordinary directories under the root directory - we'll cover this later.</p>
<p>In the next section, we'll dive deeper into partitioning and get to know two concepts that will change your perspective on file systems:  <strong>system firmware</strong> and  <strong>booting</strong>.</p>
<p>Are you ready?</p>
<p>Away we go! 🏊‍♂️</p>
<h2 id="heading-partitioning-schemes-system-firmware-and-booting">Partitioning schemes, system firmware, and booting</h2>
<p>When partitioning a storage device, we have two partitioning methods (or schemes 🙄) to choose from:</p>
<ul>
<li><strong>Master boot record (MBR) Scheme</strong></li>
<li><strong>GUID Partition Table (GPT) Scheme</strong></li>
</ul>
<p>Regardless of what partitioning scheme you choose, the first few blocks on the storage device will always contain critical data about your partitions.</p>
<p>The system's  <em>firmware</em>  uses these data structures to boot up the operating system on a partition.</p>
<p>Wait, what is the system firmware? You may ask.</p>
<p>Here's an explanation:</p>
<p>A firmware is a low-level software embedded into electronic devices to operate the device, or bootstrap another program to do it.</p>
<p>Firmware exists in computers, peripherals (keyboards, mice, and printers), or even electronic home appliances.</p>
<p>In computers, the firmware provides a standard interface for complex software like an operating system to boot up and work with hardware components.</p>
<p>However, on simpler systems like a printer, the firmware is the operating system. The menu you use on your printer is the interface of its firmware.</p>
<p>Hardware manufacturers make firmware based on two specifications:</p>
<ul>
<li><strong>Basic Input/Output (BIOS)</strong></li>
<li><strong>Unified Extensible Firmware Interface (UEFI)</strong></li>
</ul>
<p>Firmwares - BIOS-based or UEFI-based - reside on a <em>non-volatile memory</em>, like a flash ROM attached to the motherboard.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/02/5794340306_caef1e6960_b.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>[CC BY 2.0](https://www.flickr.com/photos/computerhotline/5794340306"&gt;<strong>BIOS</strong> By <a href="https://www.flickr.com/photos/computerhotline/">Thomas Bresson</a>, Licensed under <strong>&lt;a href="https://creativecommons.org/licenses/by/2.0/)</strong></em></p>
<p>When you press the power button on your computer, the firmware is the first program to run.</p>
<p>The mission of the firmware (among other things) is to boot up the computer, run the operating system, and pass it the control of the whole system.</p>
<p>A firmware also runs pre-OS environments (with network support), like recovery or diagnostic tools, or even a shell to run text-based commands.</p>
<p>The first few screens you see before your Windows logo appears are the output of your computer's firmware, verifying the health of hardware components and the memory.</p>
<p>The initial check is confirmed with a beep (usually on PCs), indicating everything is good to go.</p>
<h2 id="heading-mbr-partitioning-and-bios-based-firmware">MBR partitioning and BIOS-based firmware</h2>
<p>MBR partitioning scheme is a part of the BIOS specifications and is used by BIOS-based firmware.</p>
<p>On MBR-partitioned disks, the first sector on the storage device contains essential data to boot up the system.</p>
<p>This sector is called MBR.</p>
<p>MBR contains the following information:</p>
<ul>
<li>The boot loader, which is a  <strong>simple program</strong>  (in machine code) to initiate the first stage of the booting process</li>
<li>A  <strong>partition table</strong>, which contains information about your partitions.</li>
</ul>
<p>BIOS-based firmware boots the system differently than UEFI-based firmware.</p>
<p>Here's how it works:</p>
<p>Once the system is powered on, the BIOS firmware starts and loads the boot loader program (contained in MBR) onto memory. Once the program is on the memory, the CPU begins executing it.</p>
<p>Having the boot loader and the partition table in a predefined location like MBR enables BIOS to boot up the system without having to deal with any file.</p>
<p>If you are curious about how the CPU executes the instructions residing in the memory, you can read this beginner-friendly and fun <a target="_blank" href="https://www.decodingweb.dev/books/processing-fundamentals/how-cpu-works">guide on how the CPU works</a>.</p>
<p>The boot loader code in the MBR takes between 434 bytes to 446 bytes of the MBR space (out of 512b). Additionally, 64 bytes are allocated to the partition table, which can contain information about a maximum of four partitions.</p>
<p>446 bytes isn't big enough to accommodate too much code, though. That said, sophisticated boot loaders like <em>GRUB 2</em> on Linux split their functionality into pieces or stages.</p>
<p>The smallest piece of code known as the <em>first-stage boot loader</em> is stored in the MBR. It's usually a simple program, which doesn't require much space.</p>
<p>The responsibility of the first-stage boot loader is to initiate the next (and more complicated) stages of the booting process.</p>
<p>Immediately after the MBR, and before the first partition starts, there's a small space, around 1MB, called the  <strong>MBR gap</strong>.</p>
<p>MBR gap can be used to place another piece of the boot loader program if needed.</p>
<p>A boot loader, such as GRUB 2, uses the MBR gap to store another stage of its functionality. GRUB calls this the  <em>stage 1.5</em>  boot loader, which contains a file system driver.</p>
<p>Stage 1.5 enables the next stages of GRUB to understand the concept of files, rather than loading raw instructions from the storage device (like the first-stage boot loader).</p>
<p>The second stage boot loader, which is now capable of working with files, can load the operating system's boot loader file to boot up the respective operating system.</p>
<p>This is when the operating system's logo fades in...</p>
<p>Here's the layout of an MBR-partition storage device:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/02/mbr-partition.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>And if we magnify the MBR, its content would look like this:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/02/mbr.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Although MBR is simple and widely supported, it has some limitations 😑.</p>
<p>MBR's data structure limits the number of partitions to only  <em>four primary</em>  partitions.</p>
<p>A common workaround is to make an  <em>extended</em>  partition beside the primary partitions, as long as the total number of partitions won't exceed four.</p>
<p>An extended partition can be split into multiple  <em>logical partitions</em>. Making extended partitions is different across operating systems. Over this quick guide <a target="_blank" href="https://docs.microsoft.com/en-us/windows-hardware/manufacture/desktop/configure-more-than-four-partitions-on-a-biosmbr-based-hard-disk?view=windows-11">Microsoft explains how it should be done on Windows</a>.</p>
<p>When making a partition, you can choose between primary and extended.</p>
<p>After this is solved, we'll encounter the second limitation.</p>
<p>Each partition can be a maximum of <strong>2TiB</strong> 🙄.</p>
<p>And wait, there's more!</p>
<p>The content of the MBR sector has no backup 😱, meaning if MBR gets corrupted due to an unexpected reason, we'll have to find a way to recycle that useless piece of hardware.</p>
<p>This is where GPT partitioning stands out 😎.</p>
<h2 id="heading-gpt-partitioning-and-uefi-based-firmware">GPT partitioning and UEFI-based firmware</h2>
<p>The <strong>GPT</strong> partitioning scheme is more sophisticated than MBR and doesn't have the limitations of MBR.</p>
<p>For instance, you can have as many partitions as your operating system allows.</p>
<p>And every partition can be the size of the biggest storage device available in the market - actually a lot more.</p>
<p>GPT is gradually replacing MBR, although MBR is still widely supported across old PCs and new ones.</p>
<p>As mentioned earlier, GPT is a part of the UEFI specification, which is replacing the good old BIOS.</p>
<p>That means that UEFI-based firmware uses a GPT-partitioned storage device to handle the booting process.</p>
<p>Many hardware and operating systems now support UEFI and use the GPT scheme to partition storage devices.</p>
<p>In the GPT partitioning scheme, the first sector of the storage device is reserved for compatibility reasons with BIOS-based systems. The reason is some systems might still use a BIOS-based firmware but have a GPT-partitioned storage device.</p>
<p>This sector is called  <strong>Protective MBR.</strong> (This is where the first-stage boot loader would reside in an MBR-partitioned disk)</p>
<p>After this first sector, the GPT data structures are stored, including the  <strong>GPT header</strong>  and the  <strong>partition entries</strong>.</p>
<p>The GPT entries and the GPT header are backed up at the end of the storage device, so they can be recovered if the primary copy gets corrupted.</p>
<p>This backup is called  <strong>Secondary GPT.</strong></p>
<p>The layout of a GPT-partitioned storage device looks like this:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/02/GUID_Partition_Table_Scheme.svg" alt="Image" width="600" height="400" loading="lazy">
_<strong>[CC BY-SA 2.5](https://commons.wikimedia.org/wiki/File:GUID_Partition_Table_Scheme.svg"&gt;GUID Partition Table Scheme</strong> By <a href="https://en.wikipedia.org/wiki/User:Kbolino">Kbolino</a>, Licensed under <strong>&lt;a href="https://creativecommons.org/licenses/by-sa/2.5/)</strong>_</p>
<p>In GPT, all the booting services (boot loaders, boot managers, pre-os environments, and shells) live in a dedicated partition called  <strong>EFI System Partition (ESP)</strong>, which UEFI firmware can use.</p>
<p>ESP even has its own file system, which is a specific version of  <strong>FAT</strong>. On Linux, ESP resides under the  <code>/sys/firmware/efi</code>  path.</p>
<p>If this path cannot be found on your system, then your firmware is probably BIOS-based firmware.</p>
<p>To check it out, you can try to change the directory to the ESP mount point, like so:</p>
<pre><code>cd /sys/firmware/efi
</code></pre><p>UEFI-based firmware assumes that the storage device is partitioned with GPT and looks up the ESP in the GPT partition table.</p>
<p>Once the EFI partition is found, it looks for the configured boot loader -  usually, a file ending with  <code>.efi</code>.</p>
<p>UEFI-based firmware gets the booting configuration from  <strong>NVRAM</strong>  (a non-volatile RAM).</p>
<p>NVRAM contains the booting settings and paths to the operating system boot loader files.</p>
<p>UEFI firmware can do a BIOS-style boot too (to boot the system from an MBR disk) if configured accordingly.</p>
<p>You can use the  <code>parted</code>  command on Linux to see what partitioning scheme is used for a storage device.</p>
<pre><code>sudo parted -l
</code></pre><p>And the output would be something like this:</p>
<pre><code>Model: Virtio Block Device (virtblk)
Disk /dev/vda: <span class="hljs-number">172</span>GB
Sector size (logical/physical): <span class="hljs-number">512</span>B/<span class="hljs-number">512</span>B
Partition Table: gpt
Disk Flags: 

<span class="hljs-built_in">Number</span>  Start   End     Size    File system  Name  Flags
<span class="hljs-number">14</span>      <span class="hljs-number">1049</span>kB  <span class="hljs-number">5243</span>kB  <span class="hljs-number">4194</span>kB                     bios_grub
<span class="hljs-number">15</span>      <span class="hljs-number">5243</span>kB  <span class="hljs-number">116</span>MB   <span class="hljs-number">111</span>MB   fat32              msftdata
 <span class="hljs-number">1</span>      <span class="hljs-number">116</span>MB   <span class="hljs-number">172</span>GB   <span class="hljs-number">172</span>GB   ext4
</code></pre><p>Based on the above output, the storage device's ID is  <code>/dev/vda</code>  with a capacity of 172GB. The storage device is partitioned based on GPT and has three partitions; The second and third partitions are formatted based on the FAT32 and EXT4 file systems respectively.</p>
<p>Having a BIOS GRUB partition implies the firmware is still BIOS-based firmware.</p>
<p>Let's confirm that with the  <code>dmidecode</code>  command like so:</p>
<pre><code>sudo dmidecode -t <span class="hljs-number">0</span>
</code></pre><p>And the output would be:</p>
<pre><code># dmidecode <span class="hljs-number">3.2</span>
Getting SMBIOS data <span class="hljs-keyword">from</span> sysfs.
SMBIOS <span class="hljs-number">2.4</span> present.

...
</code></pre><p>✅ Confirmed!</p>
<h2 id="heading-formatting-partitions">Formatting partitions</h2>
<p>When partitioning is done, the partitions should be <strong>formatted</strong>.</p>
<p>Most operating systems allow you to format a partition based on a set of file systems.</p>
<p>For instance, if you are formatting a partition on Windows, you can choose between  <strong>FAT32</strong>,  <strong>NTFS</strong>, and  <strong>exFAT</strong> file systems.</p>
<p>Formatting involves the creation of various  <strong>data structures</strong>  and metadata used to manage files within a partition.</p>
<p>These data structures are one aspect of a file system.</p>
<p>Let's take the NTFS file system as an example.</p>
<p>When you format a partition to NTFS, the formatting process places the key NTFS data structures and the  <strong>Master file table (MFT)</strong> on the partition.</p>
<p>Alright, let's get back file systems with our new background about partitioning, formatting, and booting.</p>
<h2 id="heading-how-it-started-how-its-going">How it started, how it's going</h2>
<p>A file system is a set of data structures, interfaces, abstractions, and APIs that work together to manage any type of file on any type of storage device, in a consistent manner.</p>
<p>Each operating system uses a particular file system to manage the files.</p>
<p>In the early days, Microsoft used  <strong>FAT</strong> (FAT12, FAT16, and FAT32) in the  <strong>MS-DOS</strong>  and  <strong>Windows 9x</strong>  family.</p>
<p>Starting from Windows  <strong>NT 3.1</strong>, Microsoft developed  <strong>New Technology File System (NTFS)</strong>, which had many advantages over FAT32, such as supporting bigger files, allowing longer filenames, data encryption, access management, journaling, and a lot more.</p>
<p>NTFS has been the default file system of the Window NT family (2000, XP, Vista, 7, 10, etc.) ever since.</p>
<p>NTFS isn’t suitable for non-Windows environments, though 🤷🏻.</p>
<p>For instance, you can  <strong>only read</strong>  the content of an NTFS-formatted storage device (like flash memory) on a Mac OS, but you won’t be able to write anything to it - unless you <a target="_blank" href="https://www.howtogeek.com/236055/how-to-write-to-ntfs-drives-on-a-mac/">install an NTFS driver with write support</a>.</p>
<p>Or you can just use the <strong>exFat</strong> file system.</p>
<p><strong>Extended File Allocation Table (exFAT)</strong>  is a lighter version of NTFS created by Microsoft in 2006.</p>
<p>exFAT was designed for high-capacity removable devices, such as external hard disks, USB drives, and memory cards.</p>
<p>exFAT is the default file system used by  <strong>SDXC</strong>  <strong>cards</strong>.</p>
<p>Unlike NTFS, exFAT has  <strong>read and write</strong>  support on Non-Windows environments as well, including Mac OS — making it the best cross-platform file system for high-capacity removable storage devices.</p>
<p>So basically, if you have a removable disk you want to use on Windows, Mac, and Linux, you need to format it to exFAT.</p>
<p>Apple has also developed and used various file systems over the years, including<br><strong>Hierarchical File System (HFS)</strong>,  <strong>HFS+</strong>, and recently  <strong>Apple File System (APFS)</strong>.</p>
<p>Just like NTFS, APFS is a journaling file system and has been in use since the launch of  <strong>OS X High Sierra</strong>  in 2017.</p>
<p>But how about file systems in Linux distributions?</p>
<p><strong>The Extended File System (ext)</strong>  family of file systems was created for the Linux kernel - the core of the Linux operating system.</p>
<p>The first version of  <strong>ext</strong>  was released in 1991, but soon after, it was replaced by the  <strong>second extended file system</strong>  (<strong>ext2)</strong> in 1993.</p>
<p>In the 2000s, the  <strong>third extended filesystem</strong>  (<strong>ext3)</strong>  and  <strong>fourth extended filesystem (ext4)</strong>  were developed for Linux with journaling capability.</p>
<p><strong>ext4</strong>  is now the default file system in many distributions of Linux, including  <a target="_blank" href="https://en.wikipedia.org/wiki/Debian">Debian</a>  and  <a target="_blank" href="https://en.wikipedia.org/wiki/Ubuntu">Ubuntu</a>.</p>
<p>You can use the  <code>findmnt</code>  command on Linux to list your ext4-formatted partitions:</p>
<pre><code>findmnt -lo source,target,fstype,used -t ext4
</code></pre><p>The output would be something like:</p>
<pre><code>SOURCE    TARGET FSTYPE  USED
/dev/vda1 /      ext4    <span class="hljs-number">3.6</span>G
</code></pre><h2 id="heading-architecture-of-file-systems">Architecture of file systems</h2>
<p>A file system installed on an operating system consists of three layers:</p>
<ul>
<li><strong>Physical file system</strong></li>
<li><strong>Virtual file system</strong></li>
<li><strong>Logical file system</strong></li>
</ul>
<p>These layers can be implemented as independent or tightly coupled abstractions.</p>
<p>When people talk about file systems, they refer to one of these layers or all three as one unit.</p>
<p>Although these layers are different across operating systems, the concept is the same.</p>
<p>The physical layer is the concrete implementation of a file system; It's responsible for data storage and retrieval and space management on the storage device (or precisely: partitions).</p>
<p>The physical file system interacts with the storage hardware via  <a target="_blank" href="https://www.decodingweb.dev/books/processing-fundamentals/how-a-computer-program-works#device-drivers">device drivers</a>.</p>
<p>The next layer is the virtual file system or  <strong>VFS</strong>.</p>
<p>The virtual file system provides a  <strong>consistent view</strong>  of various file systems mounted on the same operating system.</p>
<p>So does this mean an operating system can use multiple file systems at the same time?</p>
<p>The answer is yes!</p>
<p>It's common for a removable storage medium to have a different file system than that of a computer.</p>
<p>For instance, on Windows (which uses NTFS as the primary file system), a flash memory might have been formatted to exFAT or FAT32.</p>
<p>That said, the operating system should provide a  <strong>unified interface</strong> between computer programs (file explorers and other apps that work with files) and the different mounted file systems (such as NTFS, APFS, ext4, FAT32, exFAT, and UDF).</p>
<p>For instance, when you open up your file explorer program, you can copy an image from an ext4 file system and paste it over to your exFAT-formatted flash memory - without having to know that files are managed differently under the hood.</p>
<p>This convenient layer between the user (you) and the underlying file systems is provided by the VFS.</p>
<p>A VFS defines a  <em>contract</em>  that all physical file systems must implement to be supported by that operating system.</p>
<p>However, this compliance isn't built into the file system core, meaning the source code of a file system doesn't include support for every operating system's VFS.</p>
<p>Instead, it uses a  <strong>file system driver</strong> to adhere to the VFS rules of every file system. A driver is a program that enables software to communicate with another software or hardware.</p>
<p>Although VFS is responsible for providing a standard interface between programs and various file systems, computer programs don't interact with VFS directly.</p>
<p>Instead, they use a unified API between programs and the VFS.</p>
<p>Can you guess what it is?</p>
<p>Yes, we're talking about the <strong>logical file system</strong>.</p>
<p>The logical file system is the user-facing part of a file system, which provides an API to enable user programs to perform various file operations, such as  <code>OPEN</code>, <code>READ</code>, and  <code>WRITE</code>, without having to deal with any storage hardware.</p>
<p>On the other hand, VFS provides a bridge between the logical layer (which programs interact with) and a set of the physical layer of various file systems.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/02/filesystem-1.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>A high-level architecture of the file system layers</em></p>
<h3 id="heading-what-does-it-mean-to-mount-a-file-system">What does it mean to mount a file system?</h3>
<p>On Unix-like systems, the VFS assigns a  <strong>device ID</strong> (for instance,  <code>dev/disk1s1</code>) to each partition or removable storage device.</p>
<p>Then, it creates a  <strong>virtual directory tree</strong>  and puts the content of each device under that directory tree as separate directories.</p>
<p>The act of assigning a directory to a storage device (under the root directory tree) is called  <strong>mounting</strong>, and the assigned directory is called a  <strong>mount point</strong>.</p>
<p>That said, on a Unix-like operating system, all partitions and removable storage devices appear as if they are directories under the root directory.</p>
<p>For instance, on Linux, the mounting points for a removable device (such as a memory card), are usually under the <code>/media</code> directory.</p>
<p>That said, once a flash memory is attached to the system, and consequently,  <em>auto mounted</em>  at the default mounting point (<code>/media</code>  in this case), its content would be available under the <code>/media</code>  directory.</p>
<p>However, there are times you need to mount a file system manually.</p>
<p>On Linux, it’s done like so:</p>
<pre><code>mount /dev/disk1s1 /media/usb
</code></pre><p>In the above command, the first parameter is the device ID (<code>/dev/disk1s1</code>), and the second parameter (<code>/media/usb</code>) is the mount point.</p>
<p>Please note that the mount point should already exist as a directory.</p>
<p>If it doesn’t, it has to be created first:</p>
<pre><code>mkdir -p /media/usb
mount /dev/disk1s1 /media/usb
</code></pre><p>If the mount-point directory already contains files, those files will be hidden for as long as the device is mounted.</p>
<h2 id="heading-files-metadata">Files metadata</h2>
<p>File metadata is a data structure that contains  <strong>data about a file</strong>, such as:</p>
<ul>
<li>File size</li>
<li>Timestamps, like creation date, last accessed date, and modification date</li>
<li>The file's owner</li>
<li>The file's mode (who can do what with the file)</li>
<li>What blocks on the partition are allocated to the file</li>
<li>and a lot more</li>
</ul>
<p>Metadata isn’t stored with the file content, though. Instead, it’s stored in a different place on the disk - but associated with the file.</p>
<p>In Unix-like systems, the metadata is in the form of data structures, called  <strong>inode</strong>.</p>
<p>Inodes are identified by a unique number called the  <em>inode number.</em></p>
<p>Inodes are associated with files in a table called  <em>inode tables</em>.</p>
<p>Each file on the storage device has an inode, which contains information about it such as the time it was created, modified, etc.</p>
<p>The inode also includes the address of the blocks allocated to the file; On the other hand, where exactly it's located on the storage device</p>
<p>In an ext4 inode, the address of the allocated blocks is stored as a set of data structures called  <strong>extents</strong> (within the inode).</p>
<p>Each extent contains the address of the <em>first data block</em> allocated to the file and the number of the  <em>continuous blocks</em> that the file has occupied.</p>
<p>Whenever you open a file on Linux, its name is first resolved to an inode number.</p>
<p>Having the inode number, the file system fetches the respective inode from the inode table.</p>
<p>Once the inode is fetched, the file system starts to compose the file from the data blocks registered in the inode.</p>
<p>You can use the  <code>df</code>  command with the  <code>-i</code>  parameter on Linux to see the inodes (total, used, and free) in your partitions:</p>
<pre><code>df -i
</code></pre><p>The output would look like this:</p>
<pre><code>udev           <span class="hljs-number">4116100</span>    <span class="hljs-number">378</span> <span class="hljs-number">4115722</span>    <span class="hljs-number">1</span>% /dev
tmpfs          <span class="hljs-number">4118422</span>    <span class="hljs-number">528</span> <span class="hljs-number">4117894</span>    <span class="hljs-number">1</span>% /run
/dev/vda1      <span class="hljs-number">6451200</span> <span class="hljs-number">175101</span> <span class="hljs-number">6276099</span>    <span class="hljs-number">3</span>% /
</code></pre><p>As you can see, the partition  <code>/dev/vda1</code>  has a total number of 6,451,200 inodes, of which 3% have been used (175,101 inodes).</p>
<p>To see the inodes associated with files in a directory, you can use the  <code>ls</code>  command with  <code>-il</code>  parameters.</p>
<pre><code>ls -li
</code></pre><p>And the output would be:</p>
<pre><code><span class="hljs-number">1303834</span> -rw-r--r--  <span class="hljs-number">1</span> root www-data  <span class="hljs-number">2502</span> Jul  <span class="hljs-number">8</span>  <span class="hljs-number">2019</span> wp-links-opml.php
<span class="hljs-number">1303835</span> -rw-r--r--  <span class="hljs-number">1</span> root www-data  <span class="hljs-number">3306</span> Jul  <span class="hljs-number">8</span>  <span class="hljs-number">2019</span> wp-load.php
<span class="hljs-number">1303836</span> -rw-r--r--  <span class="hljs-number">1</span> root www-data <span class="hljs-number">39551</span> Jul  <span class="hljs-number">8</span>  <span class="hljs-number">2019</span> wp-login.php
<span class="hljs-number">1303837</span> -rw-r--r--  <span class="hljs-number">1</span> root www-data  <span class="hljs-number">8403</span> Jul  <span class="hljs-number">8</span>  <span class="hljs-number">2019</span> wp-mail.php
<span class="hljs-number">1303838</span> -rw-r--r--  <span class="hljs-number">1</span> root www-data <span class="hljs-number">18962</span> Jul  <span class="hljs-number">8</span>  <span class="hljs-number">2019</span> wp-settings.php
</code></pre><p>The first column is the inode number associated with each file.</p>
<p>The number of inodes on a partition is decided when you format a partition. That said, as long as you have free space and unused inodes, you can store files on your storage device.</p>
<p>It's unlikely that a personal Linux OS would run out of inodes. However, enterprise services that deal with a large number of files (like mail servers) have to manage their inode quota smartly.</p>
<p>On NTFS, the metadata is stored differently, though.</p>
<p>NTFS keeps file information in a data structure called the  <a target="_blank" href="https://docs.microsoft.com/en-us/windows/win32/fileio/master-file-table"><strong>Master File Table (MFT)</strong></a>.</p>
<p>Every file has at least one entry in MFT, which contains everything about it, including its location on the storage device - similar to the inodes table.</p>
<p>On most operating systems, you can grab metadata via the graphical user interface.</p>
<p>For instance, when you right-click on a file on Mac OS, and select <strong>Get Info</strong>  (Properties in Windows), a window appears with information about the file. This information is fetched from the respective file’s metadata.</p>
<h2 id="heading-space-management">Space Management</h2>
<p>Storage devices are divided into fixed-sized blocks called  <strong>sectors</strong>.</p>
<p>A sector is the  <strong>minimum storage unit</strong>  on a storage device and is between 512 bytes and 4096 bytes (Advanced Format).</p>
<p>However, file systems use a high-level concept as the storage unit, called  <strong>blocks.</strong></p>
<p>Blocks are an abstraction over physical sectors; Each block usually consists of multiple sectors.</p>
<p>Depending on the file size, the file system allocates one or more blocks to each file.</p>
<p>Speaking of space management, the file system is aware of every  <em>used</em>  and  <em>unused</em> block on the partitions, so it’ll be able to allocate space to new files or fetch the existing ones when requested.</p>
<p>The most basic storage unit in ext4-formatted partitions is the block. However, the contiguous blocks are grouped into  <strong>block groups</strong> for easier management.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/02/block-group.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>The layout of a block group within an ext4 partition</em></p>
<p>Each block group has its own data structures and data blocks.</p>
<p>Here are the data structures a block group can contain:</p>
<ul>
<li><strong>Super Block:</strong> a metadata repository, which contains metadata about the entire file system, such as the total number of blocks in the file system, total blocks in block groups, inodes, and more. Not all block groups contain the superblock, though. A certain number of block groups store a copy of the super as a backup.</li>
<li><strong>Group Descriptors:</strong> Group descriptors also contain bookkeeping information for each block group</li>
<li><strong>Inode Bitmap:</strong> Each block group has its own inode quota for storing files. A block bitmap is a data structure used to identify  <em>used</em>  and  <em>unused</em>  inodes within the block group.  <code>1</code>  denotes used and  <code>0</code>  denotes unused inode objects.</li>
<li><strong>Block Bitmap:</strong>  a data structure used to identify used &amp; unused data blocks within the block group.  <code>1</code>  denotes used and  <code>0</code>  denotes unused data blocks</li>
<li><strong>Inode Table:</strong>  a data structure that defines the relation of files and their inodes. The number of inodes stored in this area is related to the block size used by the file system.</li>
<li><strong>Data Blocks:</strong> This is the zone within the block group where file contents are stored.</li>
</ul>
<p>Ext4 file system even takes one step further (comparing to ext3), and organizes block groups into a bigger group called  <em>flex block groups</em>.</p>
<p>The data structures of each block group, including the block bitmap, inode bitmap, and inode table, are  <em>concatenated</em>  and stored in the  <em>first block group</em>  within each flex block group.</p>
<p>Having all the data structures concatenated in one block group (the first one) frees up more contiguous data blocks on other block groups within each flex block group.</p>
<p>These concepts might be confusing, but you don't have to master every bit of them. It's just to depict the depth of file systems.</p>
<p>The layout of the first block group looks like this:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/02/block-group-detail.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>The layout of the first block in an ext4 flex block group</em></p>
<p>When a file is being written to a disk, it is written to one or more blocks within a block group.</p>
<p>Managing files at the block group level improves the performance of the file system significantly, as opposed to organizing files as one unit.</p>
<h3 id="heading-size-vs-size-on-disk">Size vs size on disk</h3>
<p>Have you ever noticed that your file explorer displays two different sizes for each file:  <strong>size,</strong>  and  <strong>size on disk</strong>.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/02/disksize-1.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Size and Size on disk</em></p>
<p>Why are <code>size</code> and <code>size on disk</code> slightly different? You may ask.</p>
<p>Here’s an explanation:</p>
<p>We already know depending on the file size, one or more blocks are allocated to a file.</p>
<p>One block is the minimum space that can be allocated to a file. This means the remaining space of a partially-filled block cannot be used by another file. This is the rule!</p>
<p>Since the size of the file  <em>isn't an integer multiple of blocks</em>, the last block might be partially used, and the remaining space would remain unused - or would be filled with zeros.</p>
<p>So "size" is basically the actual file size, while "size on disk" is the space it has occupied, even though it’s not using it all.</p>
<p>You can use the <code>du</code>  command on Linux to see it yourself.</p>
<pre><code>du -b <span class="hljs-string">"some-file.txt"</span>
</code></pre><p>The output would be something like this:</p>
<pre><code><span class="hljs-number">623</span> icon-link.svg
</code></pre><p>And to check the size on disk:</p>
<pre><code>du -B <span class="hljs-number">1</span> <span class="hljs-string">"icon-link.svg"</span>
</code></pre><p>Which will result in:</p>
<pre><code><span class="hljs-number">4096</span>    icon-link.svg
</code></pre><p>Based on the output, the allocated block is about 4kb, while the actual file size is 623 bytes. This means each block size on this operating system is 4kb.</p>
<h3 id="heading-what-is-disk-fragmentation">What is disk fragmentation?</h3>
<p>Over time, new files are written to the disk, existing files get bigger, shrunk, or deleted.</p>
<p>These frequent changes in the storage medium leave many small gaps (empty spaces) between files. These gaps are due to the same reason file size and file size on disk are different. Some files won't fill up the full block, and lots of space will be wasted. And over time there' won't be enough consequent blocks to store new files.</p>
<p>That's when new files need to be stored as fragments.</p>
<p><strong>File Fragmentation</strong> occurs when a file is stored as fragments on the storage device because the file system cannot find enough contiguous blocks to store the whole file in a row.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/02/disk_image-1.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>An example of a fragmented and non-fragmented file</em></p>
<p>Let's make it more clear with an example.</p>
<p>Imagine you have a Word document named  <code>myfile.docx</code>.</p>
<p><code>myfile.docx</code>  is initially stored in a few contiguous blocks on the disk; Let's say this is how the blocks are named:  <code>LBA250</code>,  <code>LBA251</code>, and  <code>LBA252</code>.</p>
<p>Now, if you add more content to  <code>myfile.docx</code> and save it, it will need to occupy more blocks on the storage medium.</p>
<p>Since  <code>myfile.docx</code>  is currently stored on  <code>LBA250</code>,  <code>LBA251</code>, and  <code>LBA252</code>, the new content should preferably sit within  <code>LBA253</code>  and so forth - depending on how many more blocks are needed to accommodate the new changes.</p>
<p>Now, imagine  <code>LBA253</code>  is already taken by another file (maybe it’s the first block of another file). In that case, the new content of  <code>myfile.docx</code>  has to be stored on different blocks somewhere else on the disks, for instance,  <code>LBA312</code>  and  <code>LBA313</code>.</p>
<p><code>myfile.docx</code>  got fragmented 💔.</p>
<p>File fragmentation puts a burden on the file system because every time a fragmented file is requested by a user program, the file system needs to collect every piece of the file from various locations on a disk.</p>
<p>This overhead applies to saving the file back to the disk as well.</p>
<p>The fragmentation might also occur when a file is written to the disk for the first time, probably because the file is huge and not many continuous blocks are left on the partition.</p>
<p>Fragmentation is one of the reasons some operating systems get slow as the file system ages.</p>
<h3 id="heading-should-we-care-about-fragmentation-these-days">Should We Care About Fragmentation these days?</h3>
<p>The short answer is: not anymore!</p>
<p>Modern file systems use smart algorithms to avoid (or early-detect) fragmentation as much as possible.</p>
<p>Ext4 also does some sort of  <strong>preallocation,</strong> which involves reserving blocks for a file before they are actually needed - making sure the file won't get fragmented if it gets bigger over time.</p>
<p>The number of the  <em>preallocated blocks</em>  is defined in the  <em>length field</em> of the file's extent of its inode object.</p>
<p>Additionally, ext4 uses an allocation technique called  <strong>delayed allocation</strong>.</p>
<p>The idea is instead of writing to data blocks one at a time during a write, the allocation requests are accumulated in a buffer and are written to the disk at once.</p>
<p>Not having to call the file system's <em>block allocator</em> on every write request helps the file system make better choices with distributing the available space. For instance, by placing large files apart from smaller files.</p>
<p>Imagine that a small file is located between two large files. Now, if the small file is deleted, it leaves a small space between the two files.</p>
<p>Spreading the files out in this manner leaves enough gaps between data blocks, which helps the filesystem manage (and avoid) fragmentation more easily.</p>
<p>Delayed allocation actively reduces fragmentation and increases performance.</p>
<h2 id="heading-directories">Directories</h2>
<p>A Directory (Folder in Windows) is a special file used as a  <strong>logical container</strong>  to group files and directories within a file system.</p>
<p>On NTFS and Ext4, directories and files are treated the same way. That said, directories are just files that have their own inode (on Ext4) or MFT entry (on NTFS).</p>
<p>The inode or MFT entry of a directory contains information about that directory, as well as a collection of entries pointing to the files "under" that directory.</p>
<p>The files aren't literally contained within the directory, but they are associated with the directory in a way that they appear as directory's children at a higher level, such as in a file explorer program.</p>
<p>These entries are called  <strong>directory entries.</strong> Directory entries contain file names mapped to their inode/MFT entry.</p>
<p>In addition to the directory entries, there are two more entries. The  <code>.</code> entry, which points to the directory itself, and  <code>..</code>, which points to the parent directory of this directory.</p>
<p>On Linux, you can use the  <code>ls</code>  in a directory to see the directory entries with their associated inode numbers:</p>
<pre><code>ls -lai
</code></pre><p>And the output would be something like this:</p>
<pre><code><span class="hljs-number">63756</span> drwxr-xr-x <span class="hljs-number">14</span> root root   <span class="hljs-number">4096</span> Dec  <span class="hljs-number">1</span> <span class="hljs-number">17</span>:<span class="hljs-number">24</span> .
     <span class="hljs-number">2</span> drwxr-xr-x <span class="hljs-number">19</span> root root   <span class="hljs-number">4096</span> Dec  <span class="hljs-number">1</span> <span class="hljs-number">17</span>:<span class="hljs-number">06</span> ..
 <span class="hljs-number">81132</span> drwxr-xr-x  <span class="hljs-number">2</span> root root   <span class="hljs-number">4096</span> Feb <span class="hljs-number">18</span> <span class="hljs-number">06</span>:<span class="hljs-number">25</span> backups
 <span class="hljs-number">81020</span> drwxr-xr-x <span class="hljs-number">14</span> root root   <span class="hljs-number">4096</span> Dec  <span class="hljs-number">2</span> <span class="hljs-number">07</span>:<span class="hljs-number">01</span> cache
 <span class="hljs-number">81146</span> drwxrwxrwt  <span class="hljs-number">2</span> root root   <span class="hljs-number">4096</span> Oct <span class="hljs-number">16</span> <span class="hljs-number">21</span>:<span class="hljs-number">43</span> crash
 <span class="hljs-number">80913</span> drwxr-xr-x <span class="hljs-number">46</span> root root   <span class="hljs-number">4096</span> Dec  <span class="hljs-number">1</span> <span class="hljs-number">22</span>:<span class="hljs-number">14</span> lib

 ...
</code></pre><h2 id="heading-rules-for-naming-files">Rules for naming files</h2>
<p>Some file systems enforce limitations on filenames.</p>
<p>The limitation can be in the  <strong>length of the filename</strong>  or  <strong>filename case sensitivity</strong>.</p>
<p>For instance, in NTFS (Windows) and APFS (Mac) file systems,  <code>MyFile</code>  and  <code>myfile</code>  refer to the same file, while on ext4 (Linux), they point to different files.</p>
<p>Why does this matter? You may ask.</p>
<p>Imagine that you’re creating a web page on your Windows machine. The web page contains your company logo, which is a PNG file, like this:</p>
<pre><code class="lang-html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Products - Your Website<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
        <span class="hljs-comment">&lt;!--SOME CONTENT--&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/logo.png"</span>&gt;</span>
        <span class="hljs-comment">&lt;!--SOME MORE CONTENT--&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</code></pre>
<p>If the actual file name is  <code>Logo.png</code>  (note the capital  <strong>L</strong>), you can still see the image when you open your web page on your web browser (on your Windows machine).</p>
<p>However, once you deploy it to a Linux server and view it live, you'll see a broken image.</p>
<p>Why?</p>
<p>Because in Linux (ext4 file system)  <code>logo.png</code>  and  <code>Logo.png</code>  point to two different files.</p>
<p>So keep that in mind when developing on Windows and deploying to a Linux server.</p>
<h2 id="heading-rules-for-file-size">Rules for file size</h2>
<p>One important aspect of file systems is the <strong>maximum file size</strong> they support.</p>
<p>An old file system like  <strong>FAT32</strong> (used by MS-DOS +7.1, Windows 9x family, and flash memories) can’t store files more than 4 GB, while its successor,  <strong>NTFS</strong>  allows file sizes to be up to  <strong>16 EB</strong>  (1000 TB).</p>
<p>Like NTFS, exFAT allows a file size of 16 EB too. This makes exFAT an ideal option for storing massive data objects, such as video files.</p>
<p>Practically, there’s no limitation on the file size in the exFAT and NTFS file systems.</p>
<p>Linux’s ext4 and Apple’s APFS support files up to  <strong>16 TiB</strong>  and  <strong>8 EiB</strong>  respectively.</p>
<h2 id="heading-file-manager-programs">File manager programs</h2>
<p>As you know, the logical layer of the file system provides an API to enable user applications to perform file operations, such as  <code>read</code>,  <code>write</code>,  <code>delete</code>, and  <code>execute</code> operations.</p>
<p>The file system’s API is a low-level mechanism, though, designed for computer programs, runtime environments, and shells - not designed for daily use.</p>
<p>That said, operating systems provide convenient file management utilities out of the box for your day-to-day file management.</p>
<p>For instance,  <strong>File</strong>  <strong>Explorer</strong>  on Windows,  <strong>Finder</strong> on Mac OS, and  <strong>Nautilus</strong>  on Ubuntu are examples of file manager programs.</p>
<p>These utilities use the logical file system’s API under the hood.</p>
<p>Apart from these GUI tools, operating systems expose the file system’s APIs via the command-line interfaces too, like Command Prompt on Windows, and Terminal on Mac and Linux.</p>
<p>These text-based interfaces help users do all sorts of file operations as text commands - Like how we did in the previous examples.</p>
<h2 id="heading-file-access-management">File access management</h2>
<p>Not everyone should be able to remove or modify a file they don’t own or are not authorized to do so.</p>
<p>Modern file systems provide mechanisms to control users’ access and capabilities concerning files.</p>
<p>The data regarding user permissions and file ownership is stored in a data structure called Access-Control List (ACL) on Windows or Access-Control Entries (ACE) on Unix-like operating systems (Linux and Mac OS).</p>
<p>This feature is also available in the CLI (Command prompt or Terminal), where a user can change file ownerships or limit permissions of each file right from the command line interface.</p>
<p>For instance, a file owner (on Linux or Mac) can configure a file to be available to the public, like so:</p>
<pre><code>chmod <span class="hljs-number">777</span> myfile.txt
</code></pre><p><code>777</code>  means everyone can do every operation (read, write, execute) on  <code>myfile.txt</code>. Please note this is just an example, and you should not set a file's permission to <code>777</code>.</p>
<h2 id="heading-maintaining-data-integrity">Maintaining data integrity</h2>
<p>Let’s suppose you've been working on your thesis for a month now. One day, you open the file, make some changes and save it.</p>
<p>Once you save the file, your word processor program sends a “write” request to the file system’s API (the logical file system).</p>
<p>The request is eventually passed down to the physical layer to store the file on several blocks.</p>
<p>But what if the system crashes while the older version of the file is being replaced with the new version?</p>
<p>In older file systems (like FAT32 or ext2) the data would be corrupted because it was partially written to the disk.</p>
<p>This is less likely to happen with modern file systems as they use a technique called  <strong>journaling.</strong></p>
<p>Journaling file systems record every operation that’s about to happen in the physical layer but hasn’t happened yet.</p>
<p>The main purpose is to keep track of the changes that haven't yet been committed to the file system <em>physically</em>.</p>
<p>The journal is a special allocation on the disk where each writing attempt is first stored as a  <strong>transaction</strong>.</p>
<p>Once the data is physically placed on the storage device, the change is committed to the filesystem.</p>
<p>In case of a system failure, the file system will detect the incomplete transaction and roll it back as if it never happened.</p>
<p>That said, the new content (that was being written) may still be lost, but the existing data would remain intact.</p>
<p>Modern file systems such as NTFS, APFS, and ext4 (even ext3) use journaling to avoid data corruption in case of system failure.</p>
<h2 id="heading-database-file-systems">Database File Systems</h2>
<p>Typical file systems organize files as directory trees.</p>
<p>To access a file, you traverse to the respective directory, and you'll have it.</p>
<pre><code>cd /music/country/highwayman
</code></pre><p>However, in a database file system, there’s no concept of paths and directories.</p>
<p>The database file system is a  <strong>faceted system</strong>  which groups files based on various  <em>attributes</em>  and  <em>dimensions</em>.</p>
<p>For instance, MP3 files can be listed by artist, genre, release year, and album -  at the same time!</p>
<p>A database file system is more like a high-level application to help you organize and access your files more easily and more efficiently. However, you won’t be able to access the raw files outside of this application.</p>
<p>A database file system cannot replace a typical file system, though. It’s just a high-level abstraction for easier file management on some systems.</p>
<p>The <strong>iTunes</strong> app on Mac OS is a good example of a database file system.</p>
<h2 id="heading-wrapping-up">Wrapping Up</h2>
<p>Wow! You made it to the end, which means you know a lot more about file systems now. But I'm sure this won't be the end of your file system studies.</p>
<p>So again - can we describe what a file system is and how it works in one sentence?</p>
<p>We can't! 😁</p>
<p>But let's finish this post with the brief description I used at the beginning:</p>
<p>A  <strong>file system</strong>  defines how files are  <strong>named</strong>,  <strong>stored</strong>, and  <strong>retrieved</strong>  from the storage device.</p>
<p>Alright, I think it does it for this write-up. If you notice something is missing or that I've gotten wrong, please let me in the comments below. That would help me and others too!</p>
<p>By the way, if you like more comprehensive guides like this one, visit my website <a target="_blank" href="https://www.decodingweb.dev/">decodingweb. dev</a>  and follow me on  <a target="_blank" href="https://twitter.com/lavary_">Twitter</a> because, besides freeCodeCamp, those are the channels I use to share my everyday findings.</p>
<p>Thanks for reading, and enjoy learning! 😃</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to Use Object Storage for Data Parallelization and Experimentation ]]>
                </title>
                <description>
                    <![CDATA[ By using big data, companies can learn a lot about how their businesses are performing. Analytics on sales, churn rates, and other basic metrics are available in almost real time as data comes in.  Then there are more complex analyses that you'll nee... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-use-object-storage-for-parallelization-and-experimentation/</link>
                <guid isPermaLink="false">66bb5252b0a396d22e4116fa</guid>
                
                    <category>
                        <![CDATA[ big data ]]>
                    </category>
                
                    <category>
                        <![CDATA[ data analysis ]]>
                    </category>
                
                    <category>
                        <![CDATA[ data analytics ]]>
                    </category>
                
                    <category>
                        <![CDATA[ storage ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Ry Vee ]]>
                </dc:creator>
                <pubDate>Mon, 27 Sep 2021 14:09:57 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2021/09/article-cover-pic.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By using big data, companies can learn a lot about how their businesses are performing. Analytics on sales, churn rates, and other basic metrics are available in almost real time as data comes in. </p>
<p>Then there are more complex analyses that you'll need to do. At times relationships between two seemingly unrelated data sets can provide surprising insights and unveil important opportunities for the organization.</p>
<p>Data scientists and engineers are continuing to improve how they break down and work on data. Experimentation entails discovering the right correlations among data points. </p>
<p>This means they also need to do some sort of parallelization of such data and resulting models. Parallelization simply means that the same data set is being operated upon in many different ways without damaging the integrity of the original data.</p>
<p>In this article we are going to talk about how you can make sure you're doing such experimentation and parallel processing efficiently and that it provides the maximum insights. We will be tackling different concepts related to data storage and data versioning.</p>
<h1 id="heading-block-storage-vs-object-storage">Block Storage vs Object Storage</h1>
<p>For the uninitiated, we first must understand the difference between block and object storage and why the latter is the better option when dealing with data experimentation.</p>
<p><img src="https://lh4.googleusercontent.com/p8F4n7jqjmQtqquQasDGPEj1eRdxhNIsdMFxX9gIM03w6r6u-VRzU6rn2gMqdF1U3lrGOrjWEPwlBFzR-0cYVHWBWF7tigFiS4m_EtYjw0bU4tPATeWsZNYTFwpZTbyLBAzxqmbX=s0" alt="Image" width="600" height="400" loading="lazy">
_<a target="_blank" href="https://res.cloudinary.com/practicaldev/image/fetch/s--PYImgKrK--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4519hl0nf6aze73pyvsr.png">Image source</a>_</p>
<h2 id="heading-what-is-block-storage">What is Block Storage?</h2>
<p>It is called “block storage” (also known as <a target="_blank" href="https://www.snia.org/education/storage_networking_primer/san/what_san">SAN</a>) because each dataset (in the form of files) is grouped into blocks stored in disks. </p>
<p>A classic example of block storage is the file system on your personal computer. For enterprise-level use-cases, it is scaled through a network of hard drives connected through fiber optic cables. </p>
<p>There are a few disadvantages to using block storage. First, if a sector (or a block) becomes corrupted, it can damage the files. Another problem is the lack of scalability (expanding the network of fiber optic cables is costly).</p>
<h2 id="heading-what-is-object-storage">What is Object Storage?</h2>
<p>In object storage, data is stored as objects. Each object contains the actual data, called the blob, a unique identifier (UUID), and metadata, which contains information about the object (such as timestamp, version, and author).</p>
<p>Object storage makes it cost-effective to scale your data store—you don’t need complex hardware for this. It also makes data retrieval faster as each object can be retrieved through its UUID. </p>
<p>This is in contrast to block storage, where each data location needs to be identified before the actual information can be retrieved.</p>
<p>One disadvantage of using object storage is that data can only be written once and cannot be updated. But this isn’t really a disadvantage as we will see further on in this article.</p>
<h2 id="heading-what-problems-does-object-storage-solve">What Problems Does Object Storage Solve?</h2>
<p>As we have already seen, data retrieval can be incredibly fast with object storage (no matter the size of the data store). But when it comes to data experimentation and data parallelization, object storage shines the brightest.</p>
<p>As mentioned before, you can't overwrite any data already stored as an object. This ensures object storage is protected from unwanted (or unauthorized) data destruction or updating. That’s great to know if you do a lot of data processing where accidental corruption of information could happen.</p>
<p>One other problem that object storage can solve is that it doesn’t require data to be structured. As companies produce and consume tremendous amounts of information every moment, often non-structured data (such as PDFs, videos, images) are not so easily processed into useful forms (such as for analytics or dashboards). </p>
<p>With object storage, this is now possible. You can now use non-structured data to develop machine learning models.</p>
<p>With data storage, it’s possible to have different versions of the same blob (with different metadata). As there is Git for code version control, we can have similar ways of managing different versions of the same data.</p>
<p>This brings us to the concept of data lakes.</p>
<h2 id="heading-what-are-data-lakes">What are Data Lakes?</h2>
<p>Data lakes are central repositories of data that don’t care which format such data is in. </p>
<p>Companies produce and consume tremendous amounts of data. Such data traditionally sits in silos because they belong to different departments or are in different forms (for example, videos aren’t stored in the same directory as the data in the MySQL database). </p>
<p>With data lakes, any department in the enterprise can store information without the need to pre-process it. Likewise, any data can be retrieved and analyzed by anybody from any department.</p>
<p>Data lakes are important because they make data analytics extremely fast and convenient.</p>
<h2 id="heading-how-data-experimentation-and-parallelization-work-with-object-storage">How Data Experimentation and Parallelization Work with Object Storage</h2>
<p>As with developing software, working with data requires us to utilize tools that can aid us in our workflow. A powerful open source tool for experimenting with data and performing parallelization (that is working on the same data to create different sets of machine learning models) is LakeFS.</p>
<p>LakeFS is an open source platform that provides Git-like capabilities when working with data. This means you can create branches (allowing you to experiment with data) and commit versions of data (and data models).</p>
<h3 id="heading-why-is-this-git-like-feature-important">Why is this Git-like feature important?</h3>
<p>First, you need to make sure that your data lake is <a target="_blank" href="https://mariadb.com/resources/blog/acid-compliance-what-it-means-and-why-you-should-care/">ACID</a> compliant. This means that your data changes can happen in isolation (in branches). Thus, the integrity of the data is maintained in the master branch (until such changes are ready to be merged).</p>
<p>Another important feature of LakeFS is continuous integration of data (again, much like in software development). Enterprises need to incorporate new data quickly and without being disrupted. Therefore, this ability to have a <a target="_blank" href="https://www.infoworld.com/article/3271126/what-is-cicd-continuous-integration-and-continuous-delivery-explained.html">CI/CD</a> workflow is invaluable. </p>
<p>So, let’s see how we can get started with using LakeFS with our object storage experimentation and parallelization.</p>
<h3 id="heading-how-to-install-lakefs">How to Install LakeFS</h3>
<p>Locally you can install LakeFS by running the following command in your terminal:*  </p>
<p><img src="https://lh4.googleusercontent.com/pTYRbQlB2_Mp8j_XGxUOvBI0PLf5kuuT1tYV5AxcPmrnq8K5sjLCUBwQqp4klk4rnraQnK9OD5hrudEFUwBLNcvmyNGQqDPkLQ_DkVBoVgCUfITIFdS6d1RxtkTFG_T40ZV0ia0L=s0" alt="Image" width="600" height="400" loading="lazy">
<em><a target="_blank" href="https://carbon.now.sh/?bg=rgba%28171%2C+184%2C+195%2C+1%29&amp;t=seti&amp;wt=none&amp;l=application%2Fx-sh&amp;ds=true&amp;dsyoff=20px&amp;dsblur=68px&amp;wc=true&amp;wa=true&amp;pv=56px&amp;ph=56px&amp;ln=false&amp;fl=1&amp;fm=Hack&amp;fs=14px&amp;lh=133%25&amp;si=false&amp;es=2x&amp;wm=false&amp;code=curl%2520https%253A%252F%252Fcompose.lakefs.io%2520%257C%2520docker-compose%2520-f%2520-%2520up%250A">Code source</a></em></p>
<p>_*This is assuming you have Docker and Docker-Compose installed in your system. If you don’t have Docker and Docker-Compose, you may try other installation methods <a target="_blank" href="https://docs.lakefs.io/quickstart/more_quickstart_options.html">here</a>._</p>
<p>Now visit <a target="_blank" href="http://127.0.0.1:8000/setup">http://127.0.0.1:8000/setup</a> in your browser to verify you have installed it correctly.</p>
<h3 id="heading-how-to-create-a-repository-in-lakefs">How to Create a Repository in LakeFS</h3>
<p>Once you’ve verified that LakeFS is installed correctly, go ahead and create an admin user.</p>
<p><img src="https://lh5.googleusercontent.com/kRpsNjJe60f7fiIEFC0O5ZbY88F9g-F4X-GRtl8L8WiVJ_sDiKcnz-0jmprZc-bVkfq029fYhq4K-jdBXyBQttc012Nv4v6j2vbJvk4jnbs71BF9Wulo_5JwsvmSjRE1nkQ-ltRe=s0" alt="Image" width="1627" height="923" loading="lazy">
<em><a target="_blank" href="https://docs.lakefs.io/assets/img/setup.png">Image source</a></em></p>
<p><img src="https://lh3.googleusercontent.com/oez-1Q1JH6Q_cqUh0tKE1bW-IbEXg92UP4NVkTy_o-vVETELASw8R8CoPS5ogWDZNl4hH8W3cb68_PvEECO1os9U1sgfJFA2PMnc1J57wEjomp9SrN0ZZK-OXoOjJpZcF-LPZlhu=s0" alt="Image" width="600" height="400" loading="lazy">
_<a target="_blank" href="https://docs.lakefs.io/assets/img/setup_done.png">Image source</a>_</p>
<p>Click on the login link and log in as an administrator. </p>
<p>On the page to which you get redirected, click on Create Repository. A popup will appear:</p>
<p><img src="https://lh6.googleusercontent.com/2abxJeRjLk7IRzhohW7jlG3cKQKH4kRCjIyVbQkHe_Fa9qdcGPdrbcTsFRhW7lv3S5LQtfa4xBmnNu0wRqhFSvwi1hp5_ARB_fRJlcLgz1TmDa_a9DQ-apmcIiclMLwsgfuyoD9P=s0" alt="Image" width="1622" height="907" loading="lazy">
_<a target="_blank" href="https://docs.lakefs.io/assets/img/create_repo_local.png">Image source</a>_</p>
<p>Congratulations! You now have your first repository. This is the main “bucket” in which you are going to store your data. </p>
<p>Next, we’ll start adding some data.</p>
<h3 id="heading-how-to-add-data-to-your-lakefs-repository">How to Add Data to your LakeFS Repository</h3>
<p>Visit <a target="_blank" href="https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-install.html">here</a> to install AWS CLI.</p>
<p>With the credentials created during the admin-user creation phase, configure a new connection profile:</p>
<p><img src="https://lh5.googleusercontent.com/D9FDuc11VgqsUr5LfN2UE_zTQYSKinNHB_saQxvr0MJj2yurnDCTqEC0cWA-dvOj3TYGMxJq52Una4zpaG6hrImrAaOWA43V1nMsUg0NpI9XIj8lKF6THD3ZoC0BNMqd-uRUsS6p=s0" alt="Image" width="600" height="400" loading="lazy">
<em><a target="_blank" href="https://carbon.now.sh/?bg=rgba%28171%2C+184%2C+195%2C+1%29&amp;t=seti&amp;wt=none&amp;l=application%2Fx-sh&amp;ds=true&amp;dsyoff=20px&amp;dsblur=68px&amp;wc=true&amp;wa=true&amp;pv=56px&amp;ph=56px&amp;ln=false&amp;fl=1&amp;fm=Hack&amp;fs=14px&amp;lh=133%25&amp;si=false&amp;es=2x&amp;wm=false&amp;code=aws%2520configure%2520--profile%2520local%250A%2523%2520output%253A%250A%2523%2520AWS%2520Access%2520Key%2520ID%2520%255BNone%255D%253A%2520AKIAJVHTOKZWGCD2QQYQ%250A%2523%2520AWS%2520Secret%2520Access%2520Key%2520%255BNone%255D%253A%2520****************************************%250A%2523%2520Default%2520region%2520name%2520%255BNone%255D%253A%250A%2523%2520Default%2520output%2520format%2520%255BNone%255D%253A%250A">Code source</a></em></p>
<p>To test if the connection is working, run the following:</p>
<p><img src="https://lh5.googleusercontent.com/oP-iisEz7w9qQM-zQaAUcdhXj_YMRGamhV-AwwNfFsDVm_p4HcKlGsw0sVD0aJS-Q-3rCy3VlhtcvtBxJgFCrHQLXrPB7ZyHVril1iGeWKP_mqPPrxizpw8NNAGWdNc2ZF36mfX4=s0" alt="Image" width="600" height="400" loading="lazy">
<em><a target="_blank" href="https://carbon.now.sh/?bg=rgba%28171%2C+184%2C+195%2C+1%29&amp;t=seti&amp;wt=none&amp;l=application%2Fx-sh&amp;ds=true&amp;dsyoff=20px&amp;dsblur=68px&amp;wc=true&amp;wa=true&amp;pv=56px&amp;ph=56px&amp;ln=false&amp;fl=1&amp;fm=Hack&amp;fs=14px&amp;lh=133%25&amp;si=false&amp;es=2x&amp;wm=false&amp;code=aws%2520--endpoint-url%253Dhttp%253A%252F%252Flocalhost%253A8000%2520--profile%2520local%2520s3%2520ls%250A%2523%2520output%253A%250A%2523%25202021-06-15%252013%253A43%253A03%2520example-repo%250A">Code source</a></em></p>
<p>Now, to copy files into the main branch:</p>
<p><img src="https://lh5.googleusercontent.com/Z_3sbfX6IMJzPkYeejJ1O9ftjkO3c4kPk_rlCJ1iOP2FgTnJTZ03cB8C8Ml2u4bet4cvBS60rHt7Ns-xgLWix422-w3ZvpGQCyeGKgBDd0Oog-sV-E4XSpV4ARpoYeQhR2INZV_H=s0" alt="Image" width="600" height="400" loading="lazy">
<em><a target="_blank" href="https://carbon.now.sh/?bg=rgba%28171%2C+184%2C+195%2C+1%29&amp;t=seti&amp;wt=none&amp;l=application%2Fx-sh&amp;ds=true&amp;dsyoff=20px&amp;dsblur=68px&amp;wc=true&amp;wa=true&amp;pv=56px&amp;ph=56px&amp;ln=false&amp;fl=1&amp;fm=Hack&amp;fs=14px&amp;lh=133%25&amp;si=false&amp;es=2x&amp;wm=false&amp;code=aws%2520--endpoint-url%253Dhttp%253A%252F%252Flocalhost%253A8000%2520--profile%2520local%2520s3%2520cp%2520.%252Ffoo.txt%2520s3%253A%252F%252Fexample-repo%252Fmain%252F%250A%2523%2520output%253A%250A%2523%2520upload%253A%2520.%252Ffoo.txt%2520to%2520s3%253A%252F%252Fexample-repo%252Fmain%252Ffoo.txt%250A">Code source</a></em></p>
<p>Just note that we need to prefix the path with the name of the branch we want to use.</p>
<p>Now, we will see the file we’ve added in the UI:</p>
<p><img src="https://lh6.googleusercontent.com/F8UCd8s43wM0y4WgRhHWy04p2rzBQ1ccvUZhppCzl30fE0FJEpMQb7Y1X06x-WDx3J9I5LELQv4FtFKOYWJqU2E9dENB5MMqjsv-MYfLI-oCEXLekhWH9xTcazm1-_Fmo4NxgDb_=s0" alt="Image" width="600" height="400" loading="lazy">
_<a target="_blank" href="https://docs.lakefs.io/assets/img/object_added.png">Image source</a>_</p>
<p>Next, we will need to know how to commit and create branches. To do that, we will need to install the LakeFS CLI.</p>
<h3 id="heading-how-to-install-the-lakefs-cli">How to Install the LakeFS CLI</h3>
<p>You need to first download the binary file <a target="_blank" href="https://docs.lakefs.io/#downloads">here</a>. </p>
<p>Again, we need to use the earlier created admin credentials:</p>
<p><img src="https://lh4.googleusercontent.com/KQntIwi6YaOyp2kKvKLxeYs4Il4czCGCv8fj2_PFhg2Bqy2RRGNNQtLsCxS8YT57DEH-Q63obz7emujS5tST4aoPx0qb4XLjJV3AeKEwRwQGATfJd6us3BA5Svo7Lz_i3k_Smy7N=s0" alt="Image" width="600" height="400" loading="lazy">
<em><a target="_blank" href="https://carbon.now.sh/?bg=rgba%28171%2C+184%2C+195%2C+1%29&amp;t=seti&amp;wt=none&amp;l=application%2Fx-sh&amp;ds=true&amp;dsyoff=20px&amp;dsblur=68px&amp;wc=true&amp;wa=true&amp;pv=56px&amp;ph=56px&amp;ln=false&amp;fl=1&amp;fm=Hack&amp;fs=14px&amp;lh=133%25&amp;si=false&amp;es=2x&amp;wm=false&amp;code=lakectl%2520config%250A%2523%2520output%253A%250A%2523%2520Config%2520file%2520%252Fhome%252Fjanedoe%252F.lakectl.yaml%2520will%2520be%2520used%250A%2523%2520Access%2520key%2520ID%253A%2520AKIAJVHTOKZWGCD2QQYQ%250A%2523%2520Secret%2520access%2520key%253A%2520****************************************%250A%2523%2520Server%2520endpoint%2520URL%253A%2520http%253A%252F%252Flocalhost%253A8000%252Fapi%252Fv1%250A">Code source</a></em></p>
<p>Here are some of the commands we can run to try it out:</p>
<p><img src="https://lh4.googleusercontent.com/4HuuBJwfpif6TzMS5spkzhkLQf_TC-rZ6WMjAiOOrsv3z8iF2vaTtKTjzicnm5qDjXmLq_aSGqXvAF7RE43BWd9hGB7gUSb76w1bt6ntyLJgAVFBMLwP7uYRPLFUd-1G27kVER7O=s0" alt="Image" width="600" height="400" loading="lazy">
<em><a target="_blank" href="https://carbon.now.sh/?bg=rgba%28171%2C+184%2C+195%2C+1%29&amp;t=seti&amp;wt=none&amp;l=application%2Fx-sh&amp;ds=true&amp;dsyoff=20px&amp;dsblur=68px&amp;wc=true&amp;wa=true&amp;pv=56px&amp;ph=56px&amp;ln=false&amp;fl=1&amp;fm=Hack&amp;fs=14px&amp;lh=133%25&amp;si=false&amp;es=2x&amp;wm=false&amp;code=lakectl%2520branch%2520list%2520lakefs%253A%252F%252Fexample-repo%250A%2523%2520output%253A%250A%2523%2520%252B----------%252B------------------------------------------------------------------%252B%250A%2523%2520%257C%2520REF%2520NAME%2520%257C%2520COMMIT%2520ID%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%257C%250A%2523%2520%252B----------%252B------------------------------------------------------------------%252B%250A%2523%2520%257C%2520main%2520%2520%2520%2520%2520%257C%2520a91f56a7e11be1348fc405053e5234e4af7d6da01ed02f3d9a8ba7b1f71499c8%2520%257C%250A%2523%2520%252B----------%252B------------------------------------------------------------------%252B%250A%2520%2520%2520%2520%2520%250Alakectl%2520commit%2520lakefs%253A%252F%252Fexample-repo%252Fmain%2520-m%2520%27added%2520our%2520first%2520file%21%27%250A%2523%2520output%253A%250A%2523%2520Commit%2520for%2520branch%2520%2522main%2522%2520done.%250A%2523%2520%250A%2523%2520ID%253A%2520901f7b21e1508e761642b142aea0ccf28451675199655381f65101ea230ebb87%250A%2523%2520Timestamp%253A%25202021-06-15%252013%253A48%253A37%2520%252B0300%2520IDT%250A%2523%2520Parents%253A%2520a91f56a7e11be1348fc405053e5234e4af7d6da01ed02f3d9a8ba7b1f71499c8%250A%2520%2520%250Alakectl%2520log%2520lakefs%253A%252F%252Fexample-repo%252Fmain%250A%2523%2520output%253A%2520%2520%250A%2523%2520commit%2520901f7b21e1508e761642b142aea0ccf28451675199655381f65101ea230ebb87%250A%2523%2520Author%253A%2520Example%2520User%2520%253Cuser%2540example.com%253E%250A%2523%2520Date%253A%25202021-06-15%252013%253A48%253A37%2520%252B0300%2520IDT%250A%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520added%2520our%2520first%2520file%21%250A%2520%2520%2520%2520%2520%2520%2520">Code source</a></em></p>
<p>You can find all the other commands, such as branch creation, and so on, <a target="_blank" href="https://docs.lakefs.io/reference/commands.html">online</a>.</p>
<p>There you have it! Now, you can work with your data any way you like. Experiment without guilt and create multiple versions of your data models.</p>
<h2 id="heading-in-closing">In Closing</h2>
<p>In this article, we covered a bit of ground. We learned the different kinds of data storage mechanisms and why object storage has a lot of edge when dealing with data experimentations and parallelism. </p>
<p>Next, we looked into data lakes and LakeFS, which is a powerful tool for working with data.</p>
<p>At first, it might seem a daunting task. But, as we’ve shown here, with the right set of tools and knowledge, there’s a lot you can accomplish.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ The Top 5 Object Storage Tools for Developers ]]>
                </title>
                <description>
                    <![CDATA[ Choosing a storage solution is one of the most significant decisions a developer (or development team) needs to make when building a web or mobile application. As you can imagine, there are many different storage options.  In this article, we’ll brie... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/top-5-object-storage-tools-for-developers/</link>
                <guid isPermaLink="false">66bb5258e326dc37a9d68ed5</guid>
                
                    <category>
                        <![CDATA[ Cloud ]]>
                    </category>
                
                    <category>
                        <![CDATA[ software development ]]>
                    </category>
                
                    <category>
                        <![CDATA[ storage ]]>
                    </category>
                
                    <category>
                        <![CDATA[ tools ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Ry Vee ]]>
                </dc:creator>
                <pubDate>Fri, 27 Nov 2020 14:40:38 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/11/jakob-owens-uX7UOpU-884-unsplash.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Choosing a storage solution is one of the most significant decisions a developer (or development team) needs to make when building a web or mobile application.</p>
<p>As you can imagine, there are many different storage options. </p>
<p>In this article, we’ll briefly discuss two of the most used cloud solutions: <a target="_blank" href="https://www.ionos.com/digitalguide/server/know-how/what-is-block-storage/">block storage</a> (also known as SAN or storage area network) and <a target="_blank" href="https://lakefs.io/object-storage/">object storage</a>. After this, we will go through my top 5 suggested object storage solutions.</p>
<p>There is a third type of storage that’s commonly used: file system storage. However, this mechanism can also concur with SANs and object storage, so we won't go too deep into it.</p>
<h2 id="heading-what-is-block-storage">What is Block Storage?</h2>
<p>Block storage is a network of hard drives connected via fiber-optic network. This gives it an edge over copper cables due to the increased speed.</p>
<p>The reason it's called block storage is that each file in this system is divided into “blocks” of data stored in a disk. Sectors in the disk hold onto individual blocks of data, and these blocks, when combined, form the whole file.</p>
<p>So while there are advantages of using SAN, like high scalability, it is costly and can get incredibly complex as the network grows.</p>
<h2 id="heading-what-is-object-storage">What is Object Storage?</h2>
<p>The defining feature of object storage is that, instead of storing files as blocks, data is stored as <a target="_blank" href="https://techterms.com/definition/object">objects</a>. </p>
<p>Typically these objects will have more data attached to them than the blocks used for block storage. The objects often include: </p>
<ul>
<li>A blob which contains all the payload (i.e., image, video, text content)</li>
<li>Metadata, which tells us more about the file (timestamps, permissions, author, revision, and so on)</li>
<li>A universally unique ID (UUID)</li>
</ul>
<p>One major advantage of this type of storage is that objects are easily obtained and found because of their UUID. With block storage, there’s a specific hierarchy of files that a user goes through before getting the data they need, which can considerably slow down data retrieval.</p>
<p>Now that we have that out of the way, here’s a list of my top 5 object storage tools for developers:</p>
<h3 id="heading-amazon-aws-s3httpsawsamazoncoms3"><a target="_blank" href="https://aws.amazon.com/s3/">Amazon AWS S3</a></h3>
<p><img src="https://lh3.googleusercontent.com/EaFmG10ltwYNmeyrtQrW0Td1DMX189sUjdWs5KUssGlLBr--KFKUnlYcawhqmAQyJeyv2WBKIehdeyp_jEpLjdiv1GJo8mFP-EzLCMbNhx8wMQ6A6n_PHJL8is7i21qXrg" alt="Image" width="1354" height="669" loading="lazy"></p>
<p>S3 is one of the pioneers of object storage. It manages gigantic loads of data from all over the world across hundreds of industries.</p>
<p><strong>Features</strong>:</p>
<ul>
<li>High reliability and durability as it stores S3 objects in copies across multiple systems.</li>
<li>Allows you to manage costs through its S3 Storage Classes, which provides different rates depending on access patterns.</li>
<li>Provides the highest security and protection for your data.</li>
</ul>
<h3 id="heading-google-cloud-storage-gcshttpscloudgooglecomstorage"><a target="_blank" href="https://cloud.google.com/storage/">Google Cloud Storage (GCS)</a></h3>
<p><img src="https://lh5.googleusercontent.com/EjlExkD_Wo8Jg4-hLNzzS_rQM_1-0kpD5RiQQA7fYV1CQxlpczDyNzFraXJvpft1ujMwlQ0HJGpCoa50NSMYxS-gfp6IB9M0ULxf20-sHPEAVX3rExv60A0saQ1j5WJ0mA" alt="Image" width="1354" height="669" loading="lazy"></p>
<p>Google offers four different storage types for business levels of all sizes. When you’re moving data across each of those storage types, it will provide you with the data lifecycle. With this, you can manage how long data should be stored until it has to be deleted.</p>
<p><strong>Features</strong>:</p>
<ul>
<li>You don’t have a minimum object size.</li>
<li>You have access to storage locations all around the world.</li>
<li>Very high durability and low latency.</li>
<li>Data has redundancy across several geographic locations.</li>
</ul>
<h3 id="heading-lakefshttpslakefsio"><a target="_blank" href="https://lakefs.io/">LakeFS</a></h3>
<p><img src="https://lh5.googleusercontent.com/bcXj_Y_kRrMpi2AzKVSuNcXLXB1nM9q3DvYSFzLRUgq_kCoiR3XIwp4RCF8oCyZj0NsEdwYEhozemu6VlYKSZuEkN_Lboe5xLmVXLzGMBTZJOaZp5grKe_NKRgm6aUJ9GA" alt="Image" width="1354" height="669" loading="lazy"></p>
<p>LakeFS is an open-source tool that works with object storage <a target="_blank" href="https://aws.amazon.com/big-data/datalakes-and-analytics/what-is-a-data-lake/">data lakes</a>. Data lakes usually store files or blobs in raw format centrally through a repository.</p>
<p>Data lakes, on their own, are limited by the lack of frequent communication between entities. LakeFS solves this by using data versioning.</p>
<p><strong>Features:</strong></p>
<ul>
<li>Through S3 or GCS, it allows scaling up to Petabytes in size by using a system that mimics Git.</li>
<li>You can experiment as it provides you with a development environment with your data.</li>
<li>Since it uses a Git-like scheme, you can safely use new data in another branch without affecting the main branch. You can then, later on, merge it safely once each aspect of new data checks out (schema, etc.).</li>
</ul>
<h3 id="heading-miniiohttpsminio"><a target="_blank" href="https://min.io/">MiniIO</a></h3>
<p><img src="https://lh6.googleusercontent.com/dUASXaVGj9APcrVmK0EYEU4-tbs7eSjSasDfyDXLF6_lk2MgIG2aFLPA70y2sGa5WaTWgQRQHbzkCeT4cvCDg30_dgVJyBx0qzhnNvzNboJHTMb7htYdlS09FbVEiQvmrA" alt="Image" width="1354" height="669" loading="lazy"></p>
<p>MiniIO is another open-source solution. It utilizes the Amazon S3 API, which makes it perfect for high scale projects that require super strict security.</p>
<p><strong>Features:</strong></p>
<ul>
<li>It calls itself the world’s fastest object storage as it has a read/write speed of up to 183 GB.</li>
<li>It applies web scaling principles – a cluster can join forces with other clusters until it forms multiple data centers.</li>
<li>It’s Kubernetes friendly.</li>
<li>Because it's open source, users can improve and freely redistribute it.</li>
</ul>
<h3 id="heading-stackpathhttpswwwstackpathcomproductsobject-storagesourceaffiliateampirgwc1ampclickidxtbytz2dxxylthdwux0mo3qwukew1b2pyt54ua0"><a target="_blank" href="https://www.stackpath.com/products/object-storage/?source=affiliate&amp;irgwc=1&amp;clickid=Xtbytz2dXxyLTHDwUx0Mo3QWUkEw1B2PYT54UA0">Stackpath</a></h3>
<p><img src="https://lh3.googleusercontent.com/Jb-xzBULDvCI5nZyffRY4xIT8c1Qez_Ik86zlAa2N3hPjk_hBQC3fDGdPbg57bcf38UmEvEulXynAZpjcBn06Zwicqgtbzl6MzgTHs5wl4GwoGyPrtxaAkw1YG4GsZwauw" alt="Image" width="1354" height="669" loading="lazy"></p>
<p>StackPath offers both a Content-Delivery Network service, <a target="_blank" href="https://www.networkworld.com/article/3224893/what-is-edge-computing-and-how-it-s-changing-the-network.html">Edge Computing</a>, and an S3 compatible Object Storage. It touts itself as a cheaper option to Amazon S3 and other cloud providers.</p>
<p><strong>Features</strong>:</p>
<ul>
<li>It is six times faster than competing services, especially when combined with the CDN or the Edge Computing platform.</li>
<li>It is serverless, which means it needs no warmup.</li>
<li>It has 45 edge locations, which means your application is available worldwide with the same performance anywhere.</li>
</ul>
<h3 id="heading-in-closing">In Closing</h3>
<p>There you have it – a short list of the top object storage tools that you can use for your next web or mobile project. Object storage has indeed proven a great way to store data when scalability is the most significant consideration.</p>
<p>Thanks for reading this article! I hope you learned a thing or two about storage models, especially about object storage. Please feel free to connect with me on <a target="_blank" href="https://linkedin.com/in/rvvergara">LinkedIn</a> and <a target="_blank" href="https://twitter.com/coachryanv">Twitter</a>.  </p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to Format a USB Drive to FAT32 on Windows 10 ]]>
                </title>
                <description>
                    <![CDATA[ If you need to format a USB flash drive, HDD, SDD, or some other form of storage to FAT32, you've come to the right place. In this article we'll go over what a file system is, the FAT32 standard, and several ways to format a storage device to FAT32 o... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-format-a-usb-drive-to-fat32-on-windows-10/</link>
                <guid isPermaLink="false">66ac880559c54e72c7730916</guid>
                
                    <category>
                        <![CDATA[ storage ]]>
                    </category>
                
                    <category>
                        <![CDATA[ usb ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Windows ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Windows 10 ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Kristofer Koishigawa ]]>
                </dc:creator>
                <pubDate>Fri, 16 Oct 2020 06:45:00 +0000</pubDate>
                <media:content url="https://cdn-media-2.freecodecamp.org/w1280/5fa4f2e749c47664ed81ae62.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>If you need to format a USB flash drive, HDD, SDD, or some other form of storage to FAT32, you've come to the right place.</p>
<p>In this article we'll go over what a file system is, the FAT32 standard, and several ways to format a storage device to FAT32 on Windows 10.</p>
<h2 id="heading-whats-a-file-system">What's a file system?</h2>
<p>A file system is a standardized way of organizing data on a computer storage device like a flash drive or HDD. </p>
<p>A file system divides a storage device into virtual compartments, almost like a wall of post office boxes, and keeps track of all the information that gets stored in each box.</p>
<p>Some of the most common file system formats for portable storage devices are FAT32, NTFS, and ExFAT.</p>
<h2 id="heading-fat32-compared-to-other-formats">FAT32 compared to other formats</h2>
<p>Of those three common formats, FAT32 is the oldest and most widely supported. Every major operating system will allow you to read and write from a USB flash drive that's formatted to FAT32.</p>
<p>Meanwhile, macOS can only read NTFS drives, and you would need to install third-party software to write back to the drive.</p>
<p>However, though FAT32 is well supported, its maximum drive and file size is severely limited when compared to newer formats like NTFS and ExFAT:</p>
<div class="hn-table">
<table>
<thead>
<tr>
<td></td><td>Max drive size</td><td>Max file size</td><td>Windows</td><td>macOS</td><td>Linux</td></tr>
</thead>
<tbody>
<tr>
<td>FAT32</td><td>32 GB (Windows), up to 16TB (Other OSs)</td><td>4 GB</td><td>Read/Write</td><td>Read/Write</td><td>Read/Write</td></tr>
<tr>
<td>NTFS</td><td>8 PB*</td><td>16 EB**</td><td>Read/Write</td><td>Read</td><td>Read/Write</td></tr>
<tr>
<td>ExFAT</td><td>128 PB*</td><td>16 EB**</td><td>Read/Write</td><td>Read/Write</td><td>Read/Write</td></tr>
</tbody>
</table>
</div><p>* 1 petabyte is about 1 thousand terabytes
** 1 exabyte is about 1 million terabytes</p>
<p>Note that the maximum drive and file size of NTFS and ExFAT is so large that there's basically no limit. (But it would be nice to have a 128 PB USB drive, wouldn't it?)</p>
<p>On the other hand, FAT32's max file size of 4 GB is almost nothing now that phones can record 4K videos. Also, it's a little more difficult to format a drive larger than 32 GB to FAT32 on Windows 10.</p>
<p>These days, the only reason why you'd choose to format a drive to FAT32 is for compatibility. For example, if you need to boot up an old computer, maybe with a different operating system, and backup some of its files. But you'd need to be sure that none of those files are greater than 4 GB.</p>
<p>If you're sure you want to go with FAT32, here's how to format a storage drive on Windows 10.</p>
<p><strong>Important note:</strong> Before you format a drive, make sure that you backup all of your important files. In fact, make two backups, and keep one on a remote service like Google Drive or Dropbox.</p>
<p>Formatting a drive will delete all of the data that's currently on it.</p>
<h2 id="heading-how-to-use-windows-file-explorer-to-format-a-usb-drive-to-fat32">How to use Windows File Explorer to format a USB drive to FAT32</h2>
<p>A quick note about this method: it only works on USB flash drives that are less that 32 GB. If your USB drive is larger than 32 GB, check out one of the later methods.</p>
<p>With that out of the way, plug your USB drive into your computer and open Windows File Explorer.</p>
<p>Next, right-click on the drive on the left hand side of the File Explorer window and click "Format":</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/11/windows-file-explorer-format.jpg" alt="Selecting the &quot;Format&quot; option in Windows File Explorer " width="600" height="400" loading="lazy"></p>
<p>In the window that pops up, ensure that "FAT32" is selected. Also, feel free to rename the USB drive whatever you'd like:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/11/windows-format-window.jpg" alt="The Windows Format popup window" width="600" height="400" loading="lazy"></p>
<p>You can leave the rest of the options alone. Just click start to format your drive.</p>
<p>Once it's done, your USB drive should be formatted to use the FAT32 file system.</p>
<p>To double check this, open File Explorer, right click on your USB drive, and click "Properties".</p>
<p>A window will pop up and you should see that the file system is now FAT32:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/11/drive-properties.jpg" alt="An open drive properties window to double check the format" width="600" height="400" loading="lazy"></p>
<h2 id="heading-how-to-use-rufus-to-format-a-usb-drive-to-fat32">How to use Rufus to format a USB drive to FAT32</h2>
<p>If your USB drive is larger than 32 GB, you'll need to use a third-party program like <a target="_blank" href="https://rufus.ie/">Rufus</a> to format it. </p>
<p>There are lots of other programs that can format USB drives, but Rufus is really small and portable. This means you can stick Rufus right on a USB drive, plug it into any Windows computer, and format other drives on the go.</p>
<p>After you download Rufus, double click on the <code>.exe</code> file to start the application.</p>
<p>Make sure your USB drive is selected. Then, click the "Boot selection" dropdown and select "Non bootable":</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/11/rufus-boot-selection.jpg" alt="Selecting the &quot;Non bootable&quot; option in Rufus" width="600" height="400" loading="lazy"></p>
<p>Next, click the "File system" dropdown and select "FAT32".</p>
<p>Also, feel free to change the name of your USB drive under "Volume label":</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/11/rufus-file-system-and-volume-label.jpg" alt="Selecting the file system and changing the volume label in Rufus" width="600" height="400" loading="lazy"></p>
<p>Then, click the "Start" button to format your drive. After a few seconds it'll be formatted to FAT32.</p>
<h2 id="heading-how-to-use-powershell-to-format-a-usb-drive-to-fat32">How to use PowerShell to format a USB drive to FAT32</h2>
<p>While this method works with drives larger than 32 GB, it's really slow – even formatting a 32 GB drive can take up to an hour depending on your computer.</p>
<p>But, if you aren't able to use the previous two methods for some reason, this will work in a pinch.</p>
<p>First, click on the Windows Search Bar and type in "powershell". Then, click "Run as administrator" to launch PowerShell with elevated privileges:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/11/powershell-as-administrator.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>In the PowerShell terminal, enter the following command:</p>
<p><code>format /FS:FAT32 DRIVE_LETTER:</code></p>
<p>Use the File Explorer to double check your drive letter. My drive letter was D, so I entered <code>format /FS:FAT32 D:</code>.</p>
<p>Press Enter, make sure your USB drive is plugged in, and press the Enter key again to start the process:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/11/image-33.png" alt="Using PowerShell to run the format command" width="600" height="400" loading="lazy"></p>
<p>Then go run some errands or something – it will take awhile.</p>
<p>Once the <code>format</code> command is finished, your drive should be formatted to FAT32.</p>
<h2 id="heading-in-closing">In closing</h2>
<p>Now you should be able to format a USB drive of any size to FAT32 on Windows 10. And with just a little modification, any of these methods can be used to format your drive to another file system like NTFS or ExFAT.</p>
<p>Now get out there and format all your USB drives. (But only after you backup everything important!)</p>
<p>Was this helpful? Is there a better method that you know of? <a target="_blank" href="https://twitter.com/kriskoishigawa">Tweet</a> at me and let me know how you format things on Windows 10.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Everything You Need to Know About AWS S3 ]]>
                </title>
                <description>
                    <![CDATA[ This article will provide an in-depth introduction to AWS S3 — the secure, scalable, and super cheap storage service from Amazon Web Services. If you have ever worked as a developer, you have likely come across file storage use cases. From simple ima... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/everything-you-need-to-know-about-aws-s3/</link>
                <guid isPermaLink="false">66d035c2871ae63f179f6b91</guid>
                
                    <category>
                        <![CDATA[ AWS ]]>
                    </category>
                
                    <category>
                        <![CDATA[ S3 ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Security ]]>
                    </category>
                
                    <category>
                        <![CDATA[ storage ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Manish Shivanandhan ]]>
                </dc:creator>
                <pubDate>Mon, 10 Aug 2020 20:25:33 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/08/Screenshot-2020-08-10-at-6.26.31-PM.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>This article will provide an in-depth introduction to AWS S3 — the secure, scalable, and super cheap storage service from Amazon Web Services.</p>
<p>If you have ever worked as a developer, you have likely come across file storage use cases. From simple images to large videos, uploading, storing, and accessing those files when you need them is always tricky.</p>
<p>The usual answer to file storage is to keep them on the same server where you host your web applications. But with the advent of serverless architectures and single-page applications, storing files on the same server is not a good idea.</p>
<p>You could argue that you can store files in databases. But trust me, it won’t be a pleasant experience.</p>
<p>So what's another option?</p>
<h2 id="heading-what-is-s3">What is S3?</h2>
<p>Let's look at AWS S3. S3 is an easy-to-use, scalable, and cheap storage service from Amazon. You can use S3 to store any amount of data for a wide range of use cases.</p>
<p>Static website hosting, data archival, and software delivery are a few general scenarios where S3 would be a perfect tool. </p>
<p>You can easily push and pull data with S3 using the AWS SDK. S3 also supports a number of popular programming languages, so you can use your existing stack and integrate S3 pretty easily.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/08/Screenshot-2020-08-10-at-6.14.06-PM.png" alt="Image" width="600" height="400" loading="lazy">
<em>AWS Console</em></p>
<p>S3 also offers a great user interface via the <a target="_blank" href="https://aws.amazon.com/console/">AWS console</a>. You can use it to view the data pushed to S3 along with additional options such as security and version control.</p>
<h3 id="heading-buckets">Buckets</h3>
<p>In S3, files are stored in buckets. Buckets are similar to folders on your computer.</p>
<p>Every bucket has its own unique name which can be used only once. For example, if there is a bucket called “freecodecamp”, neither you nor anyone else can re-use the same bucket name.</p>
<p>This is useful to uniquely identify resources and for static website hosting with domain names.</p>
<p>There are no limits on the number of files you can store in a bucket. Buckets also provide additional features such as version control and <a target="_blank" href="https://docs.aws.amazon.com/IAM/latest/UserGuide/access_policies.html">policies</a>.</p>
<p>You can also use different buckets for a single application. For example, an app that stores medical records can use two buckets: one for private customer data and another public bucket that contains whitepapers.</p>
<p>S3 is also an object-based storage service which means S3 considers each file an object. Every object can have its own metadata that includes the name, size, date, and other information.</p>
<h2 id="heading-s3-storage-types">S3 Storage Types</h2>
<p>S3 has three storage classes based on general use cases.</p>
<h3 id="heading-s3-standard">S3 Standard</h3>
<p>S3 Standard is the default storage plan you will be put into when you start using S3. The standard storage class has excellent performance, durability, and availability. </p>
<p>S3 Standard is best if you have data that you have to access frequently.</p>
<h3 id="heading-s3-infrequent-access-s3-ia">S3 Infrequent Access (S3-IA)</h3>
<p>S3 Infrequent Access offers a lower price for data compared to the standard plan. You can use S3-IA for data that you need less often. </p>
<p>S3-IA is great for use cases such as backups and disaster recovery.</p>
<h3 id="heading-glacier">Glacier</h3>
<p>Glacier is the least expensive storage option in S3 but is designed for archival storage. You cannot fetch data from Glacier as fast as Standard or S3-IA, but it is a great option for long term data archival.</p>
<p>In addition to choosing one of these three storage classes, you can also set lifecycle policies in S3. This means that you can schedule files to be moved automatically to S3-IA or Glacier after a certain period of time.</p>
<h2 id="heading-why-use-s3">Why Use S3?</h2>
<p>Companies like Netflix, Dropbox, and Reddit are avid users of S3. The popular file storage system Dropbox built its entire storage capacity on top of Amazon S3. </p>
<p>Let’s look at some of the core features of S3 and understand why it's so popular among enterprises and startups alike.</p>
<h3 id="heading-its-affordable">It's Affordable</h3>
<p>S3 is cheap. I mean super cheap compared to other storage solutions. And with S3, you only pay for what you use. There are no upfront costs, no setup. It's just plug and play.</p>
<p>In addition to affordable pricing, S3 offers a Free tier. This free tier comes with 5GB of storage space, 20,000 GET Requests, 2,000 PUT, COPY, POST, or LIST Requests and 15GB of Data Transfer. The free tier is available every month for the first year.</p>
<p>With S3 you can avoid paying for space or bandwidth you might not even need.</p>
<h3 id="heading-its-scalable">It's Scalable</h3>
<p>S3 scales with your application. Since you pay only for that you use, there is no limit to the data you can store in S3.</p>
<p>This is helpful during multiple scenarios, especially during an unexpected surge in user growth. You don’t have to buy extra space. S3 has you covered.</p>
<h3 id="heading-its-secure">It's Secure</h3>
<p>One of the many reasons companies prefer S3 is its inclination towards security. While you have to secure custom server setups, S3 is secure by default.</p>
<p>This does not mean you cannot store publicly accessible information in S3. S3 locks up all your data with high security unless you explicitly configure not to.</p>
<p>S3 also maintains compliance programs, such as PCI-DSS, HIPAA/HITECH, FedRAMP, EU Data Protection Directive, and FISMA, to help you meet your industry’s regulatory requirements.</p>
<h3 id="heading-it-has-versioning">It Has Versioning</h3>
<p>Versioning means keeping multiple copies of a file and tracking its changes over time. This is useful, especially when you handle sensitive data.</p>
<p>You can also retrieve accidentally deleted files when you enable versioning with S3.</p>
<p>However, if you enable versioning, you are storing multiple copies of the same document. This can have an effect on pricing as well as read/write requests you make. </p>
<p>So just take that into account while integrating versioning for your application.</p>
<p>Versioning is disabled by default for S3 but you can enable versioning using the AWS Console.</p>
<h3 id="heading-its-durable">It's Durable</h3>
<p>Data durability is an underrated feature of S3. Given how common data loss is among companies, data durability is a core factor to consider when building enterprise software.</p>
<p>S3 provides a highly durable storage infrastructure. S3 redundantly stores data in multiple facilities, making you data safe in the event of a system failure. S3 also performs regular data integrity checks to make sure your data is intact.</p>
<p>S3 offers 99.999999999% durability (called the 9s durability) and 99.99% availability of objects over a given year.</p>
<h2 id="heading-s3-use-cases">S3 Use Cases</h2>
<h3 id="heading-static-website-hosting">Static Website Hosting</h3>
<p>You can use S3 as a static website hosting platform. The difference between static and dynamic websites is that dynamic websites receive and process user input. Static websites are used only for displaying information.</p>
<p>With the advent of <a target="_blank" href="https://en.wikipedia.org/wiki/Single-page_application">Single Page Applications</a>, you can host a complete web app on S3, often free of charge. </p>
<p>Frameworks like React and Angular have made user input processing happen within the browser. You can build a SPA that listens to third party APIs and host it within S3. </p>
<p>S3 also has great support for routing, so you can use your own custom domain as well.</p>
<p>I recently wrote an article on hosting a React web app using S3 and <a target="_blank" href="https://medium.com/@manishmshiva/aws-s3-hosting-a-react-web-app-on-aws-s3-2ff2e8ca78dd">you can find the article here</a>.</p>
<h3 id="heading-analytics">Analytics</h3>
<p>You can run queries on your S3 data without moving your data to an analytics platform. This makes S3 a great use case for building powerful analytics applications.</p>
<p>S3 offers multiple options including S3 Select, Amazon Athena, and Amazon Redshift Spectrum. You can also combine these with <a target="_blank" href="https://aws.amazon.com/lambda/">AWS Lambda</a> to perform data processing on the fly.</p>
<h3 id="heading-file-sharing">File Sharing</h3>
<p>Amazon S3 can be also used as a cheap file sharing solution. Like I mentioned earlier in the article, the famous file sharing service Dropbox was first built on top of S3.</p>
<p>With flexible security policies, you can configure your S3 buckets with custom permissions for different customers. S3 also offers <a target="_blank" href="https://aws.amazon.com/s3/transfer-acceleration/#:~:text=S3%20Transfer%20Acceleration%20%28S3TA%29%20reduces,to%20S3%20for%20remote%20applications.">transfer acceleration</a> to speed up large file transfers across longer distances.</p>
<h2 id="heading-summary">Summary</h2>
<p>Amazon S3 is a great tool to work with for your web or mobile application storage requirements. With on-demand pricing and scalability at its core, S3 has been the favored cloud storage solution for small and large businesses alike.</p>
<p>Companies from Netflix to Pinterest trust S3 with their data, thanks to the 99.999999999% data durability promise from Amazon. </p>
<p>You can also use Amazon S3 as a personal storage solution or host your next project via static site hosting. In a nutshell, S3 is a great multi-purpose storage solution catering to a wide range of use cases.</p>
<p><em>I regularly write about Machine Learning, Cyber Security, and AWS. You can signup for my</em> <a target="_blank" href="https://www.manishmshiva.com/"><em>weekly newsletter</em></a> <em>here.</em></p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to Store Data in Web Browser Storage - localStorage and sessionStorage Explained ]]>
                </title>
                <description>
                    <![CDATA[ In order to manage data handled by your web application, you do not necessarily need a database. The respective Browser Storage features are supported by Chrome (version 4 and higher), Mozilla Firefox (version 3.5 and higher) and Internet Explorer (v... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-store-data-in-web-browser-storage-localstorage-and-session-storage-explained/</link>
                <guid isPermaLink="false">66c354e4a6c3eebadae8d2cf</guid>
                
                    <category>
                        <![CDATA[ Browsers ]]>
                    </category>
                
                    <category>
                        <![CDATA[ storage ]]>
                    </category>
                
                    <category>
                        <![CDATA[ toothbrush ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Sat, 01 Feb 2020 00:00:00 +0000</pubDate>
                <media:content url="https://cdn-media-2.freecodecamp.org/w1280/5f9c9d02740569d1a4ca3567.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>In order to manage data handled by your web application, you do not necessarily need a database. The respective Browser Storage features are supported by Chrome (version 4 and higher), Mozilla Firefox (version 3.5 and higher) and Internet Explorer (version 8 and higher), and a range of other browsers including those of iOS and Android.</p>
<p>There are two main possibilities for browser storage: localStorage and sessionStorage.</p>
<h2 id="heading-localstorage"><strong>localStorage</strong></h2>
<p>Any content/data saved to the <code>localStorage</code> object will be available after the browser has been restarted (closed and opened again). In order to <strong><em>save an item</em></strong> to <code>localStorage</code>, you can use the method <code>setItem()</code>. This method must be handed a key and a value.</p>
<pre><code class="lang-text">Example: localStorage.setItem("mykey","myvalue");
</code></pre>
<p>To <strong><em>retrieve the item from the localStorage</em></strong>, the method <code>getItem</code> must be used. The <code>getItem</code> method must be handed the key of the data you would like to retrieve:</p>
<pre><code class="lang-text">  Example: localStorage.getItem("mykey");
</code></pre>
<p>You can remove an item from <code>localStorage</code> by using the <code>removeItem()</code> method. This method must be handed the key of the item to be removed:</p>
<pre><code class="lang-text">  Example: localStorage.removeItem("mykey");
</code></pre>
<p>To clear the entire <code>localStorage</code>, you should use the <code>clear()</code> method on the <code>localStorage</code> object:</p>
<pre><code class="lang-text">  Example: localStorage.clear();
</code></pre>
<h2 id="heading-sessionstorage"><strong>sessionStorage</strong></h2>
<p>Items saved in the <code>sessionStorage</code> object will remain until the browser is closed by the user. Then, the storage will be cleared.</p>
<p>You can save an item to <code>sessionStorage</code>, please use the method <code>setItem()</code> on the <code>sessionStorage</code> object:</p>
<pre><code class="lang-text">Example: sessionStorage.setItem("mykey","myvalue");
</code></pre>
<p>To <strong><em>retrieve the item from the sessionStorage</em></strong>, the method <code>getItem</code> must be used. The <code>getItem</code> method must be handed the key of the data you would like to retrieve:</p>
<pre><code class="lang-text">  Example: sessionStorage.getItem("mykey");
</code></pre>
<p>You can remove an item from <code>sessionStorage</code> by using the <code>removeItem()</code> method. This method must be handed the key of the item to be removed:</p>
<pre><code class="lang-text">  Example: sessionStorage.removeItem("mykey");
</code></pre>
<p>To clear the entire <code>sessionStorage</code>, you should use the <code>clear()</code> method on the <code>sessionStorage</code> object:</p>
<pre><code class="lang-text">  Example: sessionStorage.clear();
</code></pre>
<h2 id="heading-saving-arrays-to-localstorage-and-sessionstorage"><strong>Saving arrays to localStorage and sessionStorage</strong></h2>
<p>You cannot just save single values to the <code>localStorage</code> and <code>sessionStorage</code>, but you can also save the content of an array.</p>
<p>In this example, we have an array with numbers:</p>
<pre><code class="lang-text">var ourArray =[1,2,3,4,5];
</code></pre>
<p>We can now save it to <code>localStorage</code> or <code>sessionStorage</code> using the <code>setItem()</code> method:</p>
<pre><code class="lang-text">localStorage.setItem("ourarraykey",JSON.stringify(ourArray));
</code></pre>
<p>or, for <code>sessionStorage</code>:</p>
<pre><code class="lang-text">sessionStorage.setItem("ourarraykey",JSON.stringify(ourArray));
</code></pre>
<p>In order to be saved, the array must first be converted to a string. In the example shown above, we are using the <code>JSON.stringify</code> method to accomplish this.</p>
<p>When retrieving our data from the <code>localStorage</code> or <code>sessionStorage</code>, convert it back to an array:</p>
<pre><code class="lang-text">var storedArray = localStorage.getItem("ourarraykey");
ourArray = JSON.parse(storedArray);
</code></pre>
<p>or, for <code>sessionStorage</code>:</p>
<pre><code class="lang-text">var storedArray = sessionStorage.getItem("ourarraykey");
ourArray = JSON.parse(storedArray);
</code></pre>
 ]]>
                </content:encoded>
            </item>
        
    </channel>
</rss>
