Local Storage And Session Storage in JavaScript

by rajeshkumarAugust 14, 2021April 13, 2022JavaScriptLeave a Comment

Local Storage

The localStorage is a read-only property of the window objects. It stores data in a web browser specifically to the domain and protocol. It doesn’t get sent to the server as it is stored locally in the web browser with no expiration date. The data will not be deleted when the browser is closed and reopened.

Syntax:- window.localStorage

Methods

setItem (key, value) – It allows to add a key/value pair to the storage object. If the key already exists, the name value will overwrite the old value.
getItem(key) – It returns the value of the item that is set with the given key.
key(n) – It returns the key of the item in the storage object at the nth index which can be useful for looping.
removeItem(key) – It removes the item in the storage object with the given key.

Session Storage

The sessionStorage is a read-only property of the window object. It stores data in a web browser specifically to the domain and protocol for a particular session. It doesn’t get sent to the server. Data stored in sessionStorage gets cleared when the page session ends. A page session lasts for as long as the browser is open and survives over page reloads and restores.

Syntax:- window.sessionStorage

Methods

setItem (key, value) – It allows to add a key/value pair to the storage object. If the key already exists, the name value will overwrite the old value.
getItem(key) – It returns the value of the item that is set with the given key.
key(n) – It returns the key of the item in the storage object at the nth index which can be useful for looping.
removeItem(key) – It removes the item in the storage object with the given key.

How to use Media Query in CSS for a responsive webpage?

by rajeshkumarAugust 14, 2021April 13, 2022CSSLeave a Comment

A media query consists of an optional media type and zero or more expressions that limit the style sheets’ scope by using media features, such as width, height, and color.

Syntax: –

@media not|only mediatype and (expressions/ media features) { CSS; }

Ex: –

@media screen and (min-width: 480px) {

body {

background-color: lightgreen; }

}

@media (min-width: 480px) {

body {

background-color: lightgreen; }

}

all – Used for all media type devices
print – Used for printers
screen – Used for computer screens, tablets, smart-phones etc.
speech – Used for screenreaders that “reads” the page out loud

If you use the not or only operators, you must specify an explicit media type.

And-

@media (min-width: 800px) { CSS }
@media (min-width: 800px) and (orientation: landscape) { CSS }
@media screen and (min-width: 800px) and (orientation: landscape) { CSS }

Or (Comma , )-

@media (min-width: 800px), (orientation: landscape) { CSS }

Not-

@media not all and (min-width: 800px) { CSS }
@media not (all and (min-width: 800px)) { CSS }
@media (not all) and (min-width: 800px) { CSS }
@media not screen and (color), print and (color) { CSS }
@media (not (screen and (color))), print and (color) { CSS }

Tagged : css / HTML / media / or_comma / webpage

Replace/Append Cookies in JavaScript

by rajeshkumarAugust 14, 2021April 13, 2022JavaScriptLeave a Comment

Replace/Append Cookies

When we assign a new cookie value to document.cookie, the current cookie is not replaced. The new cookie is parsed and its name-value pair is appended to the list. The exception is when you assign a new cookie with the same name (and same domain and path, if they exist) as a cookie that already exists. In this case, the old value is replaced with the new.

Reading Cookie

We can read cookies by a document.cookie. The problem occurs when we need the specific part of the cookie to perform some action.

Deleting Cookies

A cookie is deleted by setting a cookie with the same name (and domain and path, if they were set) with an expiration date in the past and if using max-age then must set a negative value.

Ex: –

Updating Cookies

A cookie is possible to update by setting a new value to a cookie with the same name.

Cookies Security Issues

Can misuse Client Details
Can track User
Client Can Delete Cookies
Client can Manipulate Cookies

Cookies Limitation

Support HTML4 / HTML 5
Each cookie can contain 4kb Data
Cookies can be stored in Browser and server
It is sent with each request

Tagged : Append / Cookies / Javascript / Replace

How to use perspective property in CSS?

by rajeshkumarAugust 14, 2021April 13, 2022CSSLeave a Comment

This property is used to define how many pixels a 3D element is placed from the view. This property allows you to change the perspective on how 3D elements are viewed. This will only effect on 3D transformed elements.

Whenever we define the perspective property for an element, it is the child elements that get the perspective view, not the element itself.

We can set this property to none (default) and length

Ex: –

div { perspective: 50px ; }

Perspective-origin–

This property is used to define where a 3D element is based in the x- and the y-axis. This property allows you to change the bottom position of 3D elements. This will only effect on 3D transformed elements. We can set this property to x (default 50%) and y axis (default 50%).

Whenever we define the perspective-origin property for an element, it is the child elements that are positioned, not the element itself.

Ex: –

div { perspective-origin: 20% 20% ; }

backface-visibility–

This property is used to define whether or not an element should be visible when not facing the screen. This property is useful when an element is rotated, and you do not want to see its backside. We can set this property to visible (default) and hidden.

Ex: –

div { backface-visibility: hidden; }

Tagged : backface-visibility / HTML / perspective / Perspective-origin / property

How many create cookies in JavaScript?

by rajeshkumarAugust 14, 2021April 13, 2022JavaScriptLeave a Comment

JavaScript Cookies

Cookies are exposed as the cookie property of the Document object. This property is both readable and writeable.

You can see Cookies in Google Chrome by following chrome://settings/content/cookies

Creating Cookies

When you assign a string to document.cookie, the browser parses it as a cookie and adds it to its list of cookies. There are several parts to each cookies, many of them optional.

Syntax: –

document.cookie = “name=value”;
document.cookie = “name=value; expires=date; domain=domain; path=path; secure”;
document.cookie = “name=value; max-age=inSecond; domain=domain; path=path; secure”;

Ex:-

Creating Cookies

Optional Cookies Attribute:-

max-age
expires
domain
path
secure

Whenever you omit the optional cookie fields, the browser fills them in automatically with reasonable defaults.

max-age

It is used to create persistent cookies. It is supported by all modern browsers except IE.

Type of cookies: –

Session Cookies – Cookies that are set without the expires/max-age field are called session cookies. It is destroyed when the user quits the browser.
Persistent Cookies – The browser keeps it up until their expiration date is reached.

Ex:-

expires

It is used to create persistent cookies.

Type of cookies: –

Session Cookies – Cookies that are set without the expires/max-age field are called session cookies. It is destroyed when the user quits the browser.
Persistent Cookies – The browser keeps it up until their expiration date is reached.

Ex:-

document.cookie = “username=devops; expires=Monday, 3-Sep-2018 09:00:00 UTC”;

domain

It specifies the domain for which the cookie is valid. If not specified, this defaults to the host portion of the current document location. If a domain is specified, subdomains are always included.

Ex: –

path

Path can be / (root) or /mydir (directory). If not specified, defaults to the current path of the current document location, as well as its descendants.

Ex: – document.cookie = “username=devops; path=/”;

Ex: – document.cookie = “username=devops; path=/home”;

secure

Cookie to only be transmitted over secure protocol as https. Before Chrome 52, this flag could appear with cookies from http domains.

Ex: – document.cookie = “username=devops; secure”;

Tagged : chrome / Cookies / document object / Google / Javascript / property

How to use transform-origin property in CSS?

by rajeshkumarAugust 14, 2021April 13, 2022CSSLeave a Comment

This property is used to change the position of transformed elements. This property must be used together with the transform property. We can set this property to x, y and z axis.

2D transformations can change the x and y axis of an element.

3D transformations can change the x, y and z axis of an element.

Syntax: –

Selector { transform-origin: x-axis y-axis z-axis; }

Ex: –

div { transform-origin: 10% 20% 30% ; }

x-axis–

This is used to define where the view is placed at the x-axis.

left
center
right
length (px, cm, em, %)

y-axis-

This is used to define where the view is placed at the y-axis.

top
center
bottom
length (px, cm, em, %)

z-axis-

This is used to define where the view is placed at the z-axis.

length (px, cm, em, %)

transform-style-

This property is used to specify how nested elements are rendered in 3D space. This property must be used together with the transform property. We can set this property to flat (default) and preserve-3d.

Ex: –

div { transform-style: preserve-3d ; }

Note – child elements will preserve its 3D position

Tagged : css / HTML / property / transform-origin / x-axis / y-axis / z-axis

What are cookies in JavaScript?

by rajeshkumarAugust 14, 2021April 13, 2022JavaScriptLeave a Comment

Cookies

A cookie is a small piece of text data set by the Web server that resided on the client’s machine. Once it’s been set, the client automatically returns the cookie to the webserver with each request that it makes. This allows the server to place values it wishes to ‘remember’ in the cookie, and have access to them when creating a response.

How Cookie Works

How Cookie Works

How Cookie Works

How Dangerous Cookies are

Type of Cookies

Session Cookies – Cookies that are set without the expires field are called session cookies. It is destroyed when the user quits the browser.

Persistent Cookies – The browser keeps it up until their expiration date is reached.

Tagged : Client / Cookies / Javascript / web server

How to add placeholder to select2.js

by Amardeep DubeyAugust 14, 2021August 14, 2021JavaScriptLeave a Comment

Single select placeholders

<select class="js-example-placeholder-single js-states form-control">
  <option></option>
</select>

$(".js-example-placeholder-single").select2({
    placeholder: "Select a state",
    allowClear: true
});

Multi-select placeholders

<select class="js-example-placeholder-multiple js-states form-control" multiple="multiple"></select>

$(".js-example-placeholder-multiple").select2({
    placeholder: "Select a state"
});

Using placeholders with AJAX

Select2 supports placeholders for all configurations, including AJAX. You will still need to add in the empty <option> if you are using a single select.

When using Select2 in single-selection mode, the placeholder option will be passed through the templateSelection callback if specified. You can use some additional logic in this callback to check the id property and apply an alternative transformation to your placeholder option:

$('select').select2({
  templateSelection: function (data) {
    if (data.id === '') { // adjust for custom placeholder values
      return 'Custom styled placeholder text';
    }

    return data.text;
  }
});

Tagged : Javascript / select2