Categories
JavaScript Nodejs

Node.js FS Module — Truncating and Removing Files

Manipulating files and directories are basic operations for any program. Since Node.js is a server side platform and can interact with the computer that it’s running on directly, being able to manipulate files is a basic feature. Fortunately, Node.js has a fs module built into its library. It has many functions that can help with manipulating files and folders. File and directory operation that are supported include basic ones like manipulating and opening files in directories. Likewise, it can do the same for files. It can do this both synchronously and asynchronously. It has an asynchronous API that have functions that support promises. Also it can show statistics for a file. Almost all the file operations that we can think of can be done with the built in fs module. In this article, we will truncate files with the truncate family of functions and remove files and symbolic links with the unlink family of functions.

Truncate Files with the fs.truncate Family of Functions

We can truncate files with the Node.js truncate family of functions. Truncating a file is to shrink the file to a specified size. To truncate a file asynchronously we can use the truncate function. The function takes 3 arguments. The first argument is the path object, which can be a string, a Buffer object or an URL object. When a file descriptor is passed into the first argument instead of the path, it will automatically call ftruncate to truncate the file with the given file descriptor. Passing in a file descriptor is deprecated and may thrown an error in the future. The second argument is the length of the file in bytes that you want to truncate it to. The default value is 0. Any extra data bigger than the size specified is lost when the size is smaller than the original size. The third argument is a callback function that is run when the truncate operation ends. It takes an err parameter which is null when the truncate operation succeeds and has an object with the error information otherwise.

To truncate a file with the truncate function, we can write the following code:

const fs = require("fs");  
const truncateFile = "./files/truncateFile.txt";

fs.truncate(truncateFile, 1, err => {  
  if (err) throw err;  
  console.log("File truncated");  
});

If we run the code above, there should be a single byte of content left in the file you’re truncating.

The synchronous version of the truncate function is the truncateSync function. The function takes 2 arguments. The first argument is the path object, which can be a string, a Buffer object or an URL object. When a file descriptor is passed into the first argument instead of the path, it will automatically call ftruncateSync to truncate the file with the given file descriptor. Passing in a file descriptor is deprecated and may thrown an error in the future .The second argument is the length of the file in bytes that you want to truncate it to. The default value is 0. Any extra data bigger than the size specified is lost when the size is smaller than the original size. It returns undefined .

We can use the truncateSync function like in the following code:

const fs = require("fs");  
const truncateFile = "./files/truncateFile.txt";

try {  
  fs.truncateSync(truncateFile, 1);  
  console.log("File truncated");  
} catch (error) {  
  console.error(error);  
}

If we run the code above, there should be a single byte of content left in the file you’re truncating.

There’s also a promise version of the truncate function. The function takes 2 arguments. The first argument is the path object, which can be a string, a Buffer object or an URL object.The second argument is the length of the file in bytes that you want to truncate it to. The default value is 0. Any extra data bigger than the size specified is lost when the size is smaller than the original size. It returns a promise that is resolved with no arguments when the operation is successful.

To truncate a file with the promise version of the truncate function, we can write the following code:

const fsPromises = require("fs").promises;  
const truncateFile = "./files/truncateFile.txt";

(async () => {  
  try {  
    await fsPromises.truncate(truncateFile, 1);  
    console.log("File truncated");  
  } catch (error) {  
    console.error(error);  
  }  
})();

If we run the code above, again there should be a single byte of content left in the file you’re truncating.

Remove Files and Symbolic Links with the fs.unlink Family of Functions

We can remove a file or a symbolic link with the unlink function. The function takes 2 arguments. The first argument is the path object, which can be a string, a Buffer object or an URL object.The second argument is a callback function that takes an err object, which is null when the file or symbolic link removal operation succeeds, and has the error data if the operation failed. The unlink function doesn’t work on directories in any state. To remove directories, we should use the rmdir function.

To use the unlink function to remove a file, we can something like the code below:

const fs = require("fs");  
const fileToDelete = "./files/deleteFile.txt";

fs.unlink(fileToDelete, err => {  
  if (err) {  
    throw err;  
  }  
  console.log("Removal complete!");  
});

If we run the code above, the file that’s to be deleted should be gone.

The synchronous version of the unlink function is the unlinkSync function. The function takes one argument. The only argument is the path object, which can be a string, a Buffer object or an URL object. It returns undefined .

We can use it like in the following code:

const fs = require("fs");  
const fileToDelete = "./files/deleteFile.txt";

try {  
  fs.unlinkSync(fileToDelete);  
  console.log("Removal complete!");  
} catch (error) {  
  console.error(error);  
}

There’s also a promise version of the unlink function. The function takes one argument. The only argument is the path object, which can be a string, a Buffer object or an URL object. It returns a promise that’s resolved with no argument when the operation is successful.

If we run the code above, the file that’s to be deleted should be gone.

We can use it like in the following code:

const fsPromises = require("fs").promises;  
const fileToDelete = "./files/deleteFile.txt";

(async () => {  
  try {  
    await fsPromises.unlink(fileToDelete);  
    console.log("Removal complete!");  
  } catch (error) {  
    console.error(error);  
  }  
})();

If we run the code above, the file that’s to be deleted should be gone.

The promise version of the unlink function is a much better choice than the unlinkSync function when you want to do multiple things sequentially that includes a call to the unlink function since it doesn’t tie up the whole program waiting for the file or symbolic link deletion operation to complete before continuing to program other parts of the program.

In this article, we truncate files with the truncate family of functions and remove files and symbolic links with the unlink family of functions. The truncate family of functions let us specify the number of bytes to keep while truncating the rest of the file. The unlink family of functions remove files and symbolic links. If we want to do these operations sequentially with other operations, the promise versions of these functions. Even though the API is still experimental, it is much better than the synchronous versions of these functions since it allows for sequential and asynchronous operations with promises. Also, it helps avoid callback hell where we nest promises in too many levels.

Categories
JavaScript Vue

How to render an array of data in Vue

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at how to render lists with thev-for directive.

Using v-for to Map Array to Elements

We can use the v-for directive to render a list of items from an array.

For example, we can use it as follows:

src/index.js :

new Vue({  
  el: "#app",  
  data: {  
    persons: [{ name: "Joe" }, { name: "Jane" }, { name: "Mary" }]  
  }  
});

index.html :

<!DOCTYPE html>  
<html>  
  <head>  
    <title>App</title>  
    <meta charset="UTF-8" />  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  </head> <body>  
    <div id="app">  
      <div v-for="person in persons">  
        {{person.name}}  
      </div>  
    </div>  
    <script src="src/index.js"></script>  
  </body>  
</html>

In the code above, we have the v-for directive, and then we write person in persons to loop through the data.persons array.

Then we get the name property from each entry and display it.

person is an alias for the array element being iterated on.

Then we get:

JoeJaneMary

All the properties of the array entry is available during iteration.

We can also add an optional second argument to access the index of the array. For example, we can write the following:

src/index.js :

new Vue({  
  el: "#app",  
  data: {  
    persons: [{ name: "Joe" }, { name: "Jane" }, { name: "Mary" }]  
  }  
});

index.html ;

<!DOCTYPE html>  
<html>  
  <head>  
    <title>App</title>  
    <meta charset="UTF-8" />  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  </head> <body>  
    <div id="app">  
      <div v-for="(person, index) in persons">  
        {{index}} - {{person.name}}  
      </div>  
    </div>  
    <script src="src/index.js"></script>  
  </body>  
</html>

Then we get:

0 - Joe1 - Jane2 - Mary

We can also use of instead of in to match the for...of loop syntax in JavaScript:

<!DOCTYPE html>  
<html>  
  <head>  
    <title>App</title>  
    <meta charset="UTF-8" />  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  </head> <body>  
    <div id="app">  
      <div v-for="person of persons">  
        {{person.name}}  
      </div>  
    </div>  
    <script src="src/index.js"></script>  
  </body>  
</html>

v-for with an Object

We can also use v-for to loop through the values of an object.

So if we write the following:

src/index.js :

new Vue({  
  el: "#app",  
  data: {  
    book: {  
      title: "JavaScript Book",  
      author: "John Smith",  
      publishedYear: 2019  
    }  
  }  
});

index.html :

<!DOCTYPE html>  
<html>  
  <head>  
    <title>App</title>  
    <meta charset="UTF-8" />  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  </head> <body>  
    <div id="app">  
      <div v-for="value in book">  
        {{value}}  
      </div>  
    </div>  
    <script src="src/index.js"></script>  
  </body>  
</html>

And we get:

JavaScript BookJohn Smith2019

We can loop through the keys of the object by providing a second argument to the expression as follows:

src/index.js :

new Vue({  
  el: "#app",  
  data: {  
    book: {  
      title: "JavaScript Book",  
      author: "John Smith",  
      publishedYear: 2019  
    }  
  }  
});

index.html :

<!DOCTYPE html>  
<html>  
  <head>  
    <title>App</title>  
    <meta charset="UTF-8" />  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  </head> <body>  
    <div id="app">  
      <div v-for="(value, key) in book">  
        {{key}} - {{value}}  
      </div>  
    </div>  
    <script src="src/index.js"></script>  
  </body>  
</html>

Then we get:

title - JavaScript Bookauthor - John SmithpublishedYear - 2019

Also, we can provide a third argument for the index of the object entry.

To do this, we can write:

src/index.js:

new Vue({  
  el: "#app",  
  data: {  
    book: {  
      title: "JavaScript Book",  
      author: "John Smith",  
      publishedYear: 2019  
    }  
  }  
});

index.html :

`<!DOCTYPE html>  
<html>  
  <head>  
    <title>App</title>  
    <meta charset="UTF-8" />  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  </head> <body>  
    <div id="app">  
      <div v-for="(value, key, index) in book">  
        {{index}}: {{key}} - {{value}}  
      </div>  
    </div>  
    <script src="src/index.js"></script>  
  </body>  
</html>

Then we get:

0: title - JavaScript Book1: author - John Smith2: publishedYear - 2019

The order of iteration over an object is based on the enumeration order of Object.keys() , which isn’t guaranteed to be consistent across JavaScript engine implementations.

Maintaining State

v-for by default updates the items in place instead of moving the DOM elements to match the order of the items to make sure it reflects what should be rendered at a particular index.

Therefore, it’s only suitable when the list doesn’t rely on child component state or temporary DOM state like input values.

To make sure Vue knows which elements are unique, we should provide a key attribute via the v-bind:key directive.

For example, we can write:

src/index.js :

new Vue({  
  el: "#app",  
  data: {  
    persons: [{ name: "Joe" }, { name: "Jane" }, { name: "Mary" }]  
  }  
});

index.html :

<!DOCTYPE html>  
<html>  
  <head>  
    <title>App</title>  
    <meta charset="UTF-8" />  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  </head> <body>  
    <div id="app">  
      <div v-for="person in persons" v-bind:key="person.name">  
        {{person.name}}  
      </div>  
    </div>  
    <script src="src/index.js"></script>  
  </body>  
</html>

We have to use primitive values as keys.

The key attribute is a generic mechanism for Vue to identify nodes.

Conclusion

We can use v-for to iterate through entries of an array or entries of an object and render the entries.

To use it to render arrays, we can either use in or of . Also, we can access the index of an array entry with v-for .

To iterate through objects, we can do the same thing, except that the first argument is the value of a property, the second argument is the key and the third is the index.

Only the first argument is required in each case.

The key attribute can be set so the Vue can identify unique nodes. We can set it to a primitive value with v-bind:key .

Categories
Express JavaScript Nodejs

Easy Debugging with the errorhandler Express Middleware

The errorhandler Express middleware can be used to handle errors during app development.

In this article, we’ll look at how to use it to debug our code during development.

Why do we Need This Middleware?

We need this for debugging purposes. It shows the full error stack trace and internals of any object that’s passed to this module will be sent back to the client if an error occurs.

It’ll display as many details as possible about errors. Object details will be fully displayed. The data can be displayed as HTML, JSON, and plain text.

When the object is a standard Error object, the string provided by the stack property will be returned in HTML or text responses.

When an object is a non-error object, the result of util.inspect will be returned in HTML or text format.

Error involving JSON responses will be an object with enumerable properties from the object in the response.

Installing the Package

We can install it by running:

npm install errorhandler

Options

The errorhandler middleware takes a few options to control what to return.

log

The log property lets us provide a function to be called with the error and a string representation of the error.

It can be used to write the error to any desired location or set to false to only send the error back in the response.

The function has the signature (err, str, req, res) where err is the Error object, str is a string representation of the error, req is the request object and res is the response object.

This function is run after the response has been written.

The default value for this option is true unless process.env.NODE_ENV has the value 'test' .

Other possible values include true , which logs errors using console.error(str) , or false , which only sends the error back in the response.

Examples

We can use it as follows:

const express = require('express');  
const express = require('express');  
const bodyParser = require('body-parser');  
const errorHandler = require('errorhandler');  
const app = express();
app.use(bodyParser.json());
app.get('/', (req, res, next) => {  
  throw new Error('error');  
  res.send();  
})
app.use(errorHandler());
app.listen(3000);

Since our route throws an error, we should get objects with the error string and object logged.

We should get something like::

Connect  
500 Error: error  
   at app.get (/home/runner/index.js:9:9)  
   at Layer.handle [as handle_request] (/home/runner/node_modules/express/lib/router/layer.js:95:5)  
   at next (/home/runner/node_modules/express/lib/router/route.js:137:13)  
   at Route.dispatch (/home/runner/node_modules/express/lib/router/route.js:112:3)  
   at Layer.handle [as handle_request] (/home/runner/node_modules/express/lib/router/layer.js:95:5)  
   at /home/runner/node_modules/express/lib/router/index.js:281:22  
   at Function.process_params (/home/runner/node_modules/express/lib/router/index.js:335:12)  
   at next (/home/runner/node_modules/express/lib/router/index.js:275:10)  
   at jsonParser (/home/runner/node_modules/body-parser/lib/types/json.js:110:7)  
   at Layer.handle [as handle_request] (/home/runner/node_modules/express/lib/router/layer.js:95:5)

Displayed on our screen.

We can add our own custom logging function as follows:

const express = require('express');  
const bodyParser = require('body-parser');  
const errorHandler = require('errorhandler');  
const app = express();  
const errorNotification = (err, str, req) => {  
  console.log(str);  
}
app.use(bodyParser.json());
app.get('/', (req, res, next) => {  
  throw new Error('error');  
  res.send();  
})
app.use(errorHandler({ log: errorNotification }));
app.listen(3000);

In the code above, we added our own errorNotification function. All we did was logging the error string with our errorNotification handler function.

Then we should get:

Error: error  
    at app.get (/home/runner/index.js:12:9)  
    at Layer.handle [as handle_request] (/home/runner/node_modules/express/lib/router/layer.js:95:5)  
    at next (/home/runner/node_modules/express/lib/router/route.js:137:13)  
    at Route.dispatch (/home/runner/node_modules/express/lib/router/route.js:112:3)  
    at Layer.handle [as handle_request] (/home/runner/node_modules/express/lib/router/layer.js:95:5)  
    at /home/runner/node_modules/express/lib/router/index.js:281:22  
    at Function.process_params (/home/runner/node_modules/express/lib/router/index.js:335:12)  
    at next (/home/runner/node_modules/express/lib/router/index.js:275:10)  
    at jsonParser (/home/runner/node_modules/body-parser/lib/types/json.js:110:7)  
    at Layer.handle [as handle_request] (/home/runner/node_modules/express/lib/router/layer.js:95:5)

From the console.log output in addition to what we see on the page.

Conclusion

With the errorhandler middleware, we can debug our Express apps more easily because we can see more information about the error like the stack trace and the object with more error information.

Also, we can see the request and response object when the error occurred.

The error data can be displayed in HTML, JSON or plain text.

We can add it by including the middleware with use , but we have to be careful not run use this in production since it shows internal data about the error.

Categories
JavaScript JavaScript Basics

Sorting JavaScript Arrays

Sorting arrays is a common operation that’s done in many apps. The sort method that comes with JavaScript arrays makes this easy. However, there are lots of intricacies when it comes to sorting arrays.

In this article, we’ll look at how to sort arrays with the sort method. Also, we’ll look at how to compare objects to order them in the way that we desire.

Basic Sorting

The most basic sorting operation is probably sorting numbers. With the sort method, we can do this easily. For example, if we have the following array:

let arr = [3, 4, 5, 2, 5, 8, 9];

Then we can sort is with the sort method as follows:

arr.sort();

The arr array is sorted in place, so we don’t have to assign it to a new variable.

After calling sort, we get that the array is:

[2, 3, 4, 5, 5, 8, 9]

We can see that the sorting is done by ordering numbers in ascending order.

Sorting number arrays in ascending order are the simplest cases. We didn’t have to modify the sort method’s default functionality to do this.

We can also sort strings by ascending Unicode code point order. The sort method will sort by the total code points of each string. The full list of code points for Unicode characters are listed at https://en.wikipedia.org/wiki/List_of_Unicode_characters.

For example, given the following array:

let strings = ['foo', 'bar', 'baz'];

We can call sort by writing:

strings.sort();

to sort in ascending total Unicode code points.

Copying an Array Before Sorting

As we can see, sort will sort the array it’s called on in place. We can avoid this by copying the array to a new array before sorting.

To do this, we can either use the slice method as follows:

let sortedStrings = strings.slice().sort();

Or more conveniently, we can use the spread operator to do the same thing:

let sortedStrings = [...strings].sort();

Sorting with Compare Functions

The sort method can take an optional callback function to let us compare the content of the array to let us sort it the way we want.

The callback function takes 2 arguments. The first one is the array entry that comes first, the second is the one that comes after the one in the first argument.

We compare them and then return a positive number, negative number, or 0 depending on our preference.

Given that we have 2 entries, a and b for the first and second parameter for the callback respectively, we return a negative number to make a come before b. To make b come before a we can return a positive number.

To keep their order unchanged with respect to each other, we return 0.

For example, we can use this to sort numbers in reverse as follows:

arr.sort((a, b) => b - a);

We want to make the bigger entry come before the smaller entry, so we return b — a to make b come before a if b is bigger than a since b bigger than a means that b — a will be positive.

Otherwise, if b is smaller than a, it’ll be negative, and it’ll be zero if they’re the same.

It’s also handy for sorting by fields in an array of objects. If we want to sort by a field of objects, then we’ve to write a compare function to do it. For example, given the following array:

let arr = [{  
    name: 'Joe',  
    age: 20  
  },  
  {  
    name: 'Mary',  
    age: 16  
  },  
  {  
    name: 'Jane',  
    age: 22  
  },  
];

We can sort by the age field by ascending age as follows:

arr.sort((a, b) => a.age - b.age);

It works the same as sorting other numbers. If a.age is less than b.age , then we return a negative number, so a comes before b . If it’s the reverse, then b comes before a, where a and b are neighboring entries of the array.

Otherwise, if they’re the same, then a and b’s order stays the same.

Then we get the following if we log the array:

{name: "Mary", age: 16}  
{name: "Joe", age: 20}  
{name: "Jane", age: 22}

We can use the comparison operators like >, <, <=, or >=to compare strings.

For example, if we want to sort the array above by name, we can write:

arr.sort((a, b) => {  
  if (a.name.toLowerCase() < b.name.toLowerCase()) {  
    return -1;  
  } else if (a.name.toLowerCase() > b.name.toLowerCase()) {  
    return 1;  
  }  
  return 0;  
});

Then we get the following result:

{name: "Jane", age: 22}  
{name: "Joe", age: 20}  
{name: "Mary", age: 16}

Comparing Non-English Strings

The callback for sorting strings above works great sorting English strings. However, it doesn’t work very well for non-English strings since it doesn’t take into account things like punctuation or accents.

To compare these kinds of strings, we can use the localeCompare method that comes with strings.

It has lots of optional that we can adjust for changing the comparison of strings, like whether to check accents, case, and other variants of a letter. The locale for comparison can also be adjusted.

The full list of options are at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare

We can use it as follows:

let arr = ['réservé', 'Premier', 'Cliché', 'communiqué', 'café', 'Adieu'];  
arr.sort((a, b) => a.localeCompare(b, 'fr', {  
  ignorePunctuation: true,  
  sensitivity: 'base'  
}));

In the code above, we passed a string b to compare with a in the comparison function of the localeCompare method as the first argument. Then we set the second argument to the 'fr' locale to indicate that we’re comparing French string. Finally, we passed in some basic options, which include ignoring punctuation and adjusting the sensitivity of the string comparison.

sensitivity set to 'base' means that strings that differ in letters are unequal.

After the sort method call above, we get that the value for arr is:

["Adieu", "café", "Cliché", "communiqué", "Premier", "réservé"]

Sorting JavaScript arrays have its tricky parts. The easiest case is sorting numbers and string code points in ascending order, which requires no comparison function.

For more complex comparisons, we’ve to pass in a comparison function. In it, returning a negative number will make the first value come before the second. Positive will make the second value come before the first. Returning 0 will keep the existing order.

Comparing non-English strings requires more care. We can use the localeCompare method that comes with strings to do the comparison by passing in various options.

Categories
JavaScript JavaScript Basics

How To Use LocalStorage to Store Data in the Browser

Storing data in a browser is something we do often for web apps. Often, we need to store some temporary data that’s user-specific on the browser. We can do this with the browser’s local-storage capabilities.

With local storage, we store data on the browser as strings. It’s a key value–based storage medium, allowing us to get data by keys and also setting values with the key as the identifier. All data is stored as strings. If a piece of data is not a string, then it’ll be converted to a string before being stored.

Once they’re saved, they’re there as long as we don’t delete the data. We can remove data by its key or remove them all at the same time. Every app that’s hosted on the same domain can access the data, so we can host multiple web apps under the same domain and still get the same data in all the apps.

This means we can easily modularize apps into smaller apps, and we won’t have a problem with browser data access as long as all the apps are hosted in the same domain.

Unlike cookies, local-storage data has no expiration time, so it’ll still be there if we don’t do anything to delete it.

We access the browser’s local storage with the localStorage object. It’ll thrown a SecurityError if we don’t access localStorage with the http protocol. This means that any URL starting with protocols like file: or data: will fail with this error.


Saving Data

We can use the setItem method to save data to a browser’s local storage. It takes two arguments. The first argument is a string with the key of the data, and the second argument is a string with the value of the corresponding key we passed into the first argument.

It throws an exception if the storage is full. Safari has the storage quota set to zero bytes in private mode, but it allows storage in private mode using separate data containers. This means we should catch exceptions from setItem.

For example, we can write:

localStorage.setItem('foo', 'bar');

Then once we run that, we’ll see the entry in the Application tab, under the Local Storage section of Chrome.

We can also write …

localStorage.foo = 'bar';

… to save data.

Bracket notation also works for assigning values to local storage. For example, we can write …

localStorage['foo'] = 'bar';

… to set the local storage item with the key 'foo' and the value 'bar' .

However, we shouldn’t use the dot or bracket notation instead of setItem. We don’t want to accidentally override things like the setItem method by setting a string to it, like trying to save data by using setItem as the key.

Saving object data

If we try to save objects, we’ll get [object Object] as the value. To actually save the content, we have to use the JSON.stringify method. For example, instead of writing …

localStorage.setItem('foo', {foo: 'bar'});

… we write:

localStorage.setItem('foo', JSON.stringify({foo: 'bar'}));

Then, we get {“foo”:”bar”} as the value for the entry with the foo key.

Repeated calling

If we call the setItem method repeated with the same key, then the existing value with the key is overwritten. For example, if we write …

localStorage.setItem('foo', 1);  
localStorage.setItem('foo', 2);

… then we get 2 as the value for the entry with the key foo since it’s the last value that was saved.


Getting Data

We can get data with the getItem method or use the dot notation to get data like any other object. getItem takes one argument — a string for the key in which we want to get a value with. It returns a string with the value if it’s set for the given key or null if it’s not.

For example, we can write:

localStorage.getItem('foo');

Then, we get the value 'bar' if we run the setItem code from the previous section.

We can also write:

localStorage.foo;

Alternatively, we can write:

localStorage['foo'];

The bracket notation is handy for accessing values with corresponding keys that aren’t valid object-property names.

There’s also a key method to get the name of the key in the local storage given the position number. It takes one argument, which is an integer that’s zero or higher. The first position is numbered 0. For example, if we have the following code…

localStorage.key(1)

… then we get the key name of the second entry in the local storage.


Removing a Single Entry in Local Storage

We can remove a single entry from the local storage given the key with the removeItem method. It takes one argument, which is a string with the key name of the entry.

For example, if we want to remove the entry with the key 'foo', then we can write:

loocalStorage.removeItem('foo');

The code above will remove the local-storage entry with the key name 'foo'.

Alternatively, we can use the delete operator to remove the item given the key name. For example, we can remove the local-storage entry with the key 'foo' by running:

delete localStorage.foo;

We can also use the bracket notation to do the same thing, so we can write …

delete localStorage['foo'];

… to remove the same entry.

However, we shouldn’t use the dot or bracket notation instead of setItem. We don’t want to accidentally override things like the setItem method by setting a string to it, like trying to save data by using setItem as the key.


Clearing Local Storage

We can use the clear() method to clear all entries in local storage.

We can write …

localStorage.clear()

… to clear all entries. We shouldn’t see anything in the browser’s local-storage section in the Application tab once we run this method.


Browser Compatibility

Local storage is available for almost all modern browsers, so it’s safe to use pretty much anywhere. Even Internet Explorer has had support for it since version 8, so it’s not a new technology. It’s much better than browser-side cookies for persistent data since it doesn’t expire and there are methods to manipulate the data.

With local storage on the browser, storing data client-side is easier than ever. We can do a lot by just calling the methods we outlined above. Whatever is saved is going to be saved as strings. If the data passed into the second argument of the setItem isn’t a string, then it’ll automatically be converted to a string.