DEV Community

Cover image for -LocalStorage, Session, Cookies
Husniddin6939
Husniddin6939

Posted on

-LocalStorage, Session, Cookies

  1. Three type of storages have own Life time duration, memory sizes and control points. 2.Additionally if we should save Object, Array or such kind of Data bases, Firstly we change them to string via JSON KEYS like this.
const person={
    name:"John",
    age:21,
    job:"Programmer",
    hobby:['sleeping']

};

LocalStorage.setItem('person', JSON.stringify('person'))
Enter fullscreen mode Exit fullscreen mode

Image description

                       LocalStorage
Enter fullscreen mode Exit fullscreen mode

Image description

LocalStorage is controled only by client-side, limit of memory is 5/10mb it depends on the browser,it only supports the type of string data base and it could edit by users.

LocalStorage used with these keys:

  1. setItem -> Add
LocalStorage.setItem('name', 'John');

Enter fullscreen mode Exit fullscreen mode

Image description

  1. getItem -> Value
let person=LocalStorage.getItem('name');
console.log(person);
Enter fullscreen mode Exit fullscreen mode

Image description

  1. removeItem -> remove
LocalStorage.removeItem('person');
Enter fullscreen mode Exit fullscreen mode

Image description

  1. clear -> clear the full storage
LocalStorage.clear();
Enter fullscreen mode Exit fullscreen mode
                       Cookies
Enter fullscreen mode Exit fullscreen mode

Image description

Cookies more used for Safty and it only save a few dates arround 4kb, if we want to delete it we can but other case it is not deleted. Cookies controlled by both side it client-side and server-side and it accept requests also supports string and editable.

                       Session
Enter fullscreen mode Exit fullscreen mode

Image description

Sessin can save 5mb memory size , it removed when we close the tab and it also support string and controlled by client-side.

Top comments (2)

Collapse
 
kalkwst profile image
Kostas Kalafatis

Just a heads up that you can add highlighting to the code blocks if you'd like. Just change:

code block with no colors example

... to specify the language:

code block with colors example

More details in our editor guide!

Collapse
 
bekmuhammaddev profile image
BekmuhammadDev

great😎😎