@alessiofrittoli/web-utils
Advanced tools
Run the following command to start using web-utils in your projects:
npm i @alessiofrittoli/web-utils
or using pnpm
pnpm i @alessiofrittoli/web-utils
deferTask. See API Reference for more info.deferCallback. See API Reference for more info.import { ... } from '@alessiofrittoli/web-utils'
// or
import { ... } from '@alessiofrittoli/web-utils/arrays'
arrayUniqueRemoves duplicate values from an array.
| Parameter | Type | Description |
|---|---|---|
array | T[] | The input array. |
Type: T[]
The filtered array.
const pointer = {}
console.log( arrayUnique( [ pointer, 'b', pointer, 'c', 'b' ] ) )
// Outputs: [ {}, 'b', 'c' ]
arrayObjectUniqueRemoves duplicate entries from an array referencing an object key.
| Parameter | Type | Description |
|---|---|---|
array | T[] | An array of objects. |
property | keyof T | The Object property to refer to. |
Type: T[]
The filtered array.
const arr = [
{ id: 1, name: 'a' },
{ id: 2, name: 'b' },
{ id: 1, name: 'c' }, // duplicate `id`
{ id: 3, name: 'd' },
{ id: 4, name: 'a' }, // duplicate `name`
]
console.log( arrayObjectUnique( arr, 'id' ) )
// Outputs: [
// { id: 1, name: 'a' },
// { id: 2, name: 'b' },
// { id: 3, name: 'd' },
// { id: 4, name: 'a' },
// ]
console.log( arrayObjectUnique( arr, 'name' ) )
// Outputs: [
// { id: 1, name: 'a' },
// { id: 2, name: 'b' },
// { id: 1, name: 'c' },
// { id: 3, name: 'd' },
// ]
listToArrayConvert a stringified Array to Array object.
| Parameter | Type | Description |
|---|---|---|
string | string | An array of objects. |
Type: string[]
The converted stringified Array to Array object.
console.log( listToArray( '1,2, 3, 4' ).map( Number ) )
// Outputs: [ 1, 2, 3, 4 ]
chunkIntoSplit Array into chunks.
| Parameter | Default | Description |
|---|---|---|
T | unknown[] | The input array type. |
| Parameter | Type | Description |
|---|---|---|
array | T[] | The original Array. |
options | ChunkIntoOptions | An object defining split criteria. |
options.size | number | Will split the given Array in a way to ensure each chunk length is, whenever possible, equal to the given value. |
options.count | number | Will split the given Array in a way to ensure n chunks as the given value. |
Type: T[]
An Array of chunks.
console.log( chunkInto( [ 1, 2, 3, 4, 5 ], { count: 2 } ) )
// Output: [ [ 1, 2, 3 ], [ 4, 5 ] ]
console.log( chunkInto( [ 1, 2, 3, 4, 5 ], { size: 2 } ) )
// Output: [ [ 1, 2 ], [ 3, 4 ], [ 5 ] ]
import { ... } from '@alessiofrittoli/web-utils'
// or
import { ... } from '@alessiofrittoli/web-utils/blob'
downloadBlobCreate and download a blob object.
| Parameter | Type | Description |
|---|---|---|
filename | string | The download file name. |
data | BodyInit | The download file data. |
init | ResponseInit | (Optional) The ResponseInit object. |
fetch( ... )
.then( response => response.formData() )
.then( async data => {
await Promise.all(
Array.from( data.entries() )
.map( async ( [, file ] ) => {
if ( ! ( file instanceof File ) ) return
await downloadBlob( file.name, file )
} )
)
} )
.catch( error => {
console.error( error )
} )
import { ... } from '@alessiofrittoli/web-utils'
// or
import { ... } from '@alessiofrittoli/web-utils/dom'
blockScrollPrevent Element Overflow.
It calculates the scrollbar width and the resulting value is applied to the target element right padding-right to prevent width grows.
It also applies the --scrollbar-size CSS variable that can be used to apply a padding-right to the position fixed elements inside the target.
| Parameter | Type | Default | Description |
|---|---|---|---|
target | HTMLElement | Document.documentElement | (Optional) The target Element. |
const openPopUpHandler = () => {
blockScroll()
// ... handle popup
}
.modal-wrapper {
position : fixed;
inset : 0;
padding-right : var( --scrollbar-size, 0 );
}
const element = document.querySelector( '.css-selector' )
if ( element ) {
blockScroll( element )
}
restoreScrollRestore Element Overflow.
| Parameter | Type | Default | Description |
|---|---|---|---|
target | HTMLElement | Document.documentElement | (Optional) The target Element. |
const closePopUpHandler = () => {
// ... handle close
restoreScroll()
}
const element = document.querySelector( '.css-selector' )
if ( element ) {
restoreScroll( element )
}
import { ... } from '@alessiofrittoli/web-utils'
// or
import { ... } from '@alessiofrittoli/web-utils/generators'
isGeneratorFunctionCheck if a function is a GeneratorFunction or AsyncGeneratorFunction.
| Parameter | Type | Description |
|---|---|---|
reference | unknown | The function to check. |
Type: reference is GeneratorFunction | AsyncGeneratorFunction
true if the given reference is a GeneratorFunction or AsyncGeneratorFunction.false otherwise.isDefaultGeneratorFunctionCheck if a function is a GeneratorFunction.
| Parameter | Type | Description |
|---|---|---|
reference | unknown | The function to check. |
Type: reference is GeneratorFunction
true if the given reference is a GeneratorFunction.false otherwise.isAsyncGeneratorFunctionCheck if a function is an AsyncGeneratorFunction.
| Parameter | Type | Description |
|---|---|---|
reference | unknown | The function to check. |
Type: reference is AsyncGeneratorFunction
true if the given reference is an AsyncGeneratorFunction.false otherwise.isGeneratorObject<T>Check if reference is a Generator or AsyncGenerator.
| Parameter | Type | Description |
|---|---|---|
reference | unknown | The reference to check. |
Type: reference is Generator<T> | AsyncGenerator<T>
true if the given reference is a Generator or AsyncGenerator.false otherwise.isDefaultGeneratorObject<T>Check if reference is a Generator.
| Parameter | Type | Description |
|---|---|---|
reference | unknown | The reference to check. |
Type: reference is Generator<T>
true if the given reference is a Generator.false otherwise.isAsyncGeneratorObject<T>Check if reference is an AsyncGenerator.
| Parameter | Type | Description |
|---|---|---|
reference | unknown | The reference to check. |
Type: reference is AsyncGenerator<T>
true if the given reference is an AsyncGenerator.false otherwise.import { ... } from '@alessiofrittoli/web-utils'
// or
import { ... } from '@alessiofrittoli/web-utils/map'
TypedMap<T, P, K>A type-safe extension of the Map class that enforces key-value relationships based on a provided type.
| Parameter | Type | Default | Description |
|---|---|---|---|
T | Record<string, unknown> | unknown | The object type defining the key-value relationships. |
P | boolean | true | Defines whether the Map.get() method should return a possibily undefined value. |
K | keyof T | keyof T | Internal - The subset of keys in T that are allowed in the Map. |
getTypedMap<T, P, K>Creates a new instance of a type-safe Map with the given type.
| Parameter | Type | Description |
|---|---|---|
iterable | Iterable<readonly [ K, T[ K ] ]> | null | Initial Map constructor iterable object. |
Type: TypedMap<T, P, K>
A new instance of a type-safe Map.
interface User
{
name : string
age : number
isActive : boolean
}
const user = getTypedMap<User>( [
[ 'name', 'Foo' ],
[ 'age', 27 ],
[ 'isActive', true ],
] )
console.log( user.get( 'name' ) ) // type: `string | undefined`
console.log( user.get( 'age' ) ) // type: `number | undefined`
console.log( user.get( 'isActive' ) ) // type: `boolean | undefined`
interface User
{
name : string
age : number
isActive : boolean
banned? : boolean
}
const user = getTypedMap<User, false>( [
[ 'name', 'Foo' ],
[ 'age', 27 ],
[ 'isActive', true ],
] )
console.log( user.get( 'name' ) ) // type: `string`
console.log( user.get( 'age' ) ) // type: `number`
console.log( user.get( 'isActive' ) ) // type: `boolean`
console.log( user.get( 'banned' ) ) // type: `boolean | undefined`
import { ... } from '@alessiofrittoli/web-utils'
// or
import { ... } from '@alessiofrittoli/web-utils/promises'
sleepAwait a void Promise that resolves after the given time.
| Parameter | Type | Description |
|---|---|---|
time | number | The sleep time in milliseconds after the Promise get resolved. |
Type: Promise<void>
A new Promise which get resolved after the specified time.
const fn = async () => {
// ...
await sleep( 2000 )
// ...
}
deferTaskDefer task so main-thread is not blocked in order to quickly paint and respond to user interaction.
| Parameter | Description |
|---|---|
T | The task function definition. unknown types will be inherited by your function type definition. |
U | The task function arguments. unknown types will be inherited by your function type. |
| Parameter | Type | Description |
|---|---|---|
task | T | The task callable function. |
...args | U | Arguments required by the given task function. |
Type: Promise<Awaited<ReturnType<T>>>
A new Promise which returns the task result once fulfilled.
const myLongTask = () => {
...
}
button.addEventListener( 'click', () => {
deferTask( myLongTask )
} )
const myLongTask = ( target: HTMLButtonElement ) => {
...
}
button.addEventListener( 'click', event => {
const target = event.target as HTMLButtonElement
deferTask( myLongTask, target )
} )
deferCallbackDefer task handler so main-thread is not blocked in order to quickly paint and respond to user interaction.
| Parameter | Description |
|---|---|
T | The task function definition. unknown types will be inherited by your function type definition. |
U | The task function arguments. unknown types will be inherited by your function type. |
| Parameter | Type | Description |
|---|---|---|
task | T | The task callable function. |
Type: ( ...args: U ) => Promise<Awaited<ReturnType<T>>>
A new handler which returns a new Promise that returns the task result once fulfilled.
const myLongTask = ( event: Event ) => {
...
}
button.addEventListener( 'click', deferCallback( myLongTask ) )
import { ... } from '@alessiofrittoli/web-utils'
// or
import { ... } from '@alessiofrittoli/web-utils/strings'
ucFirstMake first letter uppercase.
| Parameter | Type | Description |
|---|---|---|
input | string | The input string to convert. |
Type: string
The processed string.
console.log( ucFirst( 'String value' ) ) // Outputs: 'String value'
console.log( ucFirst( 'string value' ) ) // Outputs: 'String value'
lcFirstMake first letter lowercase.
| Parameter | Type | Description |
|---|---|---|
input | string | The input string to convert. |
Type: string
The processed string.
console.log( lcFirst( 'String value' ) ) // Outputs: 'string value'
console.log( lcFirst( 'string value' ) ) // Outputs: 'string value'
toCamelCaseConvert string to camelCase.
| Parameter | Type | Description |
|---|---|---|
input | string | The input string to convert. |
Type: string
The converted string to camelCase.
console.log( toCamelCase( 'font-family' ) ) // Outputs: 'fontFamily'
console.log( toCamelCase( 'background-color' ) ) // Outputs: 'backgroundColor'
console.log( toCamelCase( '-webkit-align-content' ) ) // Outputs: 'WebkitAlignContent'
console.log( toCamelCase( 'some value' ) ) // Outputs: 'someValue'
console.log( toCamelCase( 'some_value' ) ) // Outputs: 'someValue'
console.log( toCamelCase( 'some value_with mixed_Cases' ) ) // Outputs: 'someValueWithMixedCases'
console.log( toCamelCase( '-string@with#special$characters' ) ) // Outputs: 'StringWithSpecialCharacters'
toKebabCaseConvert string to kebab-case string.
| Parameter | Type | Description |
|---|---|---|
input | string | The input string to convert. |
Type: string
The converted string to kebab-case.
console.log( toKebabCase( 'fontFamily' ) ) // Outputs: 'font-family'
console.log( toKebabCase( 'backgroundColor' ) ) // Outputs: 'background-color'
console.log( toKebabCase( 'string with spaces' ) ) // Outputs: 'string-with-spaces'
console.log( toKebabCase( 'string_with_underscores' ) ) // Outputs: 'string-with-underscores'
console.log( toKebabCase( 'WebkitAlignContent' ) ) // Outputs: '-webkit-align-content'
console.log( toKebabCase( 'some value_with mixed_Cases' ) ) // Outputs: 'some-value-with-mixed-cases'
console.log( toKebabCase( '-string@with#special$characters' ) ) // Outputs: '-string-with-special-characters
stringifyValueStringify value.
| Parameter | Type | Description |
|---|---|---|
input | any | The value to stringify. |
Type: string
The stringified input.
console.log( stringifyValue( new Date( 'Sat, 20 Apr 2025 16:20:00 GMT' ) ) )
// Outputs: '2025-04-20T16:20:00.000Z'
console.log( stringifyValue( null ) )
// Outputs: 'null'
console.log( stringifyValue( { prop: 'value', prop2: true } ) )
// Outputs: '{"prop":"value","prop2":true}'
console.log( stringifyValue( [ 1, 2, true, null, () => {} ] ) )
// Outputs: '[1,2,true,null,null]'
console.log( stringifyValue(
new Map( [
[ 'key', 'value' ],
[ 'key2', 'value' ],
] )
) )
// Outputs: '[["key","value"],["key2","value"]]'
console.log( stringifyValue(
new Headers( {
key : 'value',
key2 : 'value',
} )
) )
// Outputs: '[["key","value"],["key2","value"]]'
console.log( stringifyValue( true ) ) // Outputs: 'true'
console.log( stringifyValue( false ) ) // Outputs: 'false'
console.log( stringifyValue( 0 ) ) // Outputs: '0'
console.log( stringifyValue( 420 ) ) // Outputs: '420'
console.log( stringifyValue( undefined ) ) // Outputs: ''
console.log( stringifyValue( () => {} ) ) // Outputs: ''
console.log( stringifyValue( new Promise<void>( resolve => resolve() ) ) ) // Outputs: ''
parseValueParse stringified value.
| Parameter | Description |
|---|---|
T | The expected returned value type. |
| Parameter | Type | Description |
|---|---|---|
input | string | The value to parse. |
Type: T | undefined
input.undefined if no input or empty string is given.console.log( parseValue<Date>( stringifyValue( new Date() ) ) )
// Outputs: current Date object.
console.log( parseValue<number>( '12345' ) ) // Outputs: 12345
console.log( parseValue() ) // Outputs: undefined
console.log( parseValue( ' ' ) ) // Outputs: undefined
console.log( parseValue<true>( stringifyValue( true ) ) )
// Outputs: true
console.log( parseValue( stringifyValue( { key: 'value' } ) ) )
// Outputs: { key: 'value' }
console.log( parseValue( stringifyValue( [ 1, 2, 3, 4, 5 ] ) ) )
// Outputs: [ 1, 2, 3, 4, 5 ]
console.log( parseValue( 'String value' ) ) // Outputs: 'String value'
⚠️ Docs coming soon
⚠️ Docs coming soon
⚠️ Docs coming soon
import { ... } from '@alessiofrittoli/web-utils'
// or
import { ... } from '@alessiofrittoli/web-utils/browser-api'
getMediaMatchesSafely executes window.matchMedia() in server and browser environments.
| Parameter | Type | Description |
|---|---|---|
query | string | The Media Query string to check. |
Type: boolean
false if window is not defined or if the document currently doesn't matches the given query.true otherwise.console.log( ! getMediaMatches( '(orientation:portrait)' ) )
openBrowserPopUpOpens a webpage in a browser PopUp.
The openBrowserPopUp uses Window.open() under the hood, but provides default options to make your work easier.
| Parameter | Type | Default | Description |
|---|---|---|---|
options | OpenBrowserPopUpOptions | - | An object defining custom PopUp options. |
options.url | UrlInput | - | The URL or path of the resource to be loaded. See UrlInput for more info about accepted formats. |
options.width | number | 600 | The PopUp width. |
options.height | number | 800 | The PopUp height. |
options.context | string | - | A string, without whitespace, specifying the name of the browsing context the resource is being loaded into. |
options.features | OptionsFeatures | - | Additional custom PopUp features. |
Type: WindowProxy | null
WindowProxy object is returned if the browser successfully opens the new browsing context.null is returned if the browser fails to open the new browsing context, for example because it was blocked by a browser popup blocker.let windowProxy: WindowProxy | null = null
const clickHandler = () => {
if ( windowProxy && ! windowProxy.closed ) {
return windowProxy.focus()
}
windowProxy = openBrowserPopUp( {
url : {
pathname : '/',
query : { key: 'value' }
},
} )
}
const clickHandler = () => {
openBrowserPopUp( {
context : 'some-context-name',
url : {
pathname : '/',
query : { key: 'value' }
},
} )
}
const clickHandler2 = () => {
openBrowserPopUp( {
context : 'some-context-name',
url : '/other-path',
} )
}
import { ... } from '@alessiofrittoli/web-utils'
// or
import { ... } from '@alessiofrittoli/web-utils/device'
isPortraitCheck if device is in portrait orientation.
Type: boolean
true if the device is in portrait orientation when this function is executed.false otherwise.console.log( ! isPortrait() )
Cookie Classimport { Cookie } from '@alessiofrittoli/web-utils'
// or
import { Cookie } from '@alessiofrittoli/web-utils/storage/Cookie'
import { Priority, SameSite } from '@alessiofrittoli/web-utils'
// or
import { Priority, SameSite } from '@alessiofrittoli/web-utils/storage/Cookie'
import type { RawCookie, ParsedCookie, ParsedCookieMap } from '@alessiofrittoli/web-utils'
// or
import type { RawCookie, ParsedCookie, ParsedCookieMap } from '@alessiofrittoli/web-utils/storage/Cookie'
Priority EnumThe Cookie Priority.
| Constant | Value | Description |
|---|---|---|
Low | Low | Low priority. |
Medium | Medium | Medium priority (default). |
High | High | High priority. |
SameSite EnumControls whether or not a cookie is sent with cross-site requests, providing some protection against cross-site request forgery attacks (CSRF).
| Constant | Value | Description |
|---|---|---|
Strict | Strict | The browser sends the cookie only for same-site requests. |
Lax | Lax | The cookie is not sent on cross-site requests, such as on requests to load images or frames, but is sent when a user is navigating to the origin site from an external site. |
None | None | The browser sends the cookie with both cross-site and same-site requests. |
RawCookie<K, V>Interface representing Cookie properties before it get parsed.
| Property | Type | Description |
|---|---|---|
name | K | The Cookie name. |
value | V | The Cookie value. |
domain | string | Defines the host to which the cookie will be sent. |
expires | string | number | Date | Indicates the maximum lifetime of the cookie. |
httpOnly | boolean | Forbids JavaScript from accessing the cookie, for example, through the Document.cookie property. |
maxAge | number | Indicates the number of seconds until the cookie expires. If set, expires is ignored. |
partitioned | boolean | Indicates that the cookie should be stored using partitioned storage. |
path | string | Indicates the path that must exist in the requested URL for the browser to send the Cookie header. |
sameSite | SameSite | Controls whether or not a cookie is sent with cross-site requests, providing some protection against cross-site request forgery attacks (CSRF). |
secure | boolean | Indicates that the cookie is sent to the server only when a request is made with the https: scheme. |
priority | Priority | Defines the Cookie priority. |
ParsedCookie<K, V>Interface representing Cookie properties after it get parsed.
RawCookie<K, V>| Property | Type | Description |
|---|---|---|
expires | Date | Indicates the maximum lifetime of the cookie. |
ParsedCookieMap<K, V>Map representation of a parsed Cookie.
Cookie.parse<K, V>()Parse the given cookie parameters to a Cookie Map.
| Parameter | Description |
|---|---|
K | The typed cookie name. |
V | The type of the cookie value. |
| Parameter | Type | Description |
|---|---|---|
options | RawCookie<K, V> | ParsedCookieMap<K, V> | The cookie options or a parsed Cookie Map. |
Type: ParsedCookieMap<K, V>
The parsed Cookie Map.
const cookie = Cookie.parse( {
name : 'cookiename',
value : { test: 'value' },
path : '/specific-path',
priority : Priority.High,
expires : Date.now() + 20 * 60 * 1000,
domain : 'example.com',
secure : true,
httpOnly : true,
sameSite : SameSite.Lax,
maxAge : Date.now() + 30 * 60 * 1000,
partitioned : true,
} )
Cookie.toString<K, V>()Stringify a Cookie ready to be stored.
| Parameter | Description |
|---|---|
K | The typed cookie name. |
V | The type of the cookie value. |
| Parameter | Type | Description |
|---|---|---|
options | RawCookie<K, V> | ParsedCookieMap<K, V> | The cookie options or a parsed Cookie Map. |
Type: string
The stringified Cookie ready to be stored.
document.cookie = (
Cookie.toString( {
name : 'cookiename',
value : { test: 'value' },
path : '/specific-path',
priority : Priority.High,
expires : Date.now() + 20 * 60 * 1000,
domain : 'example.com',
secure : true,
httpOnly : false,
sameSite : SameSite.Lax,
maxAge : Date.now() + 30 * 60 * 1000,
partitioned : true,
} )
)
Cookie.fromString<K, V>()Parse a cookie string to a Cookie Map.
| Parameter | Description |
|---|---|
K | The typed cookie name. |
V | The expected cookie value type. |
| Parameter | Type | Description |
|---|---|---|
cookie | string | The cookie string. |
Type: ParsedCookieMap<K, V> | null
The parsed Cookie Map or null if parsing fails.
const cookies = (
document.cookie.split( '; ' )
.map( Cookie.fromString )
.filter( Boolean )
)
Cookie.fromListString<T, K>()Parse a cookie list string to a Map of cookies.
| Parameter | Description |
|---|---|
T | A Record o key-value pairs (key: cookie name, value: expected cookie value type). |
K | Internal. |
| Parameter | Type | Description |
|---|---|---|
list | string | The cookie list string. |
Type: TypedMap<{ [P in K]: ParsedCookieMap<P, T[P]>; }>
The Map of parsed cookies indexed by the Cookie name.
/** On-site stubbed cookie names. */
enum CookieName
{
COOKIE_1 = 'cookie-1',
COOKIE_2 = 'cookie-2',
}
interface Cookie1
{
test: 'value'
}
interface Cookie2
{
test: boolean
}
type CookiesMap = {
[ CookieName.COOKIE_1 ]: Cookie1
[ CookieName.COOKIE_2 ]: Cookie2
}
Document.cookieconst cookies = Cookie.fromListString<CookiesMap>( document.cookie )
const cookie = cookies.get( CookieName.COOKIE_1 ) // `ParsedCookieMap<CookieName.COOKIE_1, Cookie1> | undefined`
const cookieValue = cookie?.get( 'value' ) // `Cookie1 | undefined`
Cookie headerconst { headers } = request
const cookielist = headers.get( 'Cookie' )
if ( cookielist ) {
const cookies = Cookie.fromListString<CookiesMap>( cookielist )
const cookie = cookies.get( CookieName.COOKIE_2 ) // `ParsedCookieMap<CookieName.COOKIE_2, Cookie2> | undefined`
const cookieValue = cookie?.get( 'value' ) // `Cookie2 | undefined`
}
Cookie.get<T>()Get a cookie by cookie name from Document.cookie.
| Parameter | Description |
|---|---|
T | The expected type for the Cookie value. |
| Parameter | Type | Description |
|---|---|---|
name | string | The name of the cookie. |
Type: ParsedCookieMap<typeof name, T> | undefined
undefined if no cookie has been found in Document.cookie.const cookie = Cookie.get<string>( 'access_token' )
const value = cookie?.get( 'value' ) // `string | undefined`
Cookie.getAll<T>()Get a Map of all cookies found in Document.cookie.
| Parameter | Description |
|---|---|
T | A Record o key-value pairs (key: cookie name, value: expected cookie value type). |
Type: TypedMap<{ [P in K]: ParsedCookieMap<P, T[P]>; }>
The Map of parsed cookies indexed by the Cookie name.
const cookies = Cookie.getAll()
const cookie = cookies.get( 'somecookie' )
Cookie.set<K, V>()Set a cookie to Document.cookie.
| Parameter | Description |
|---|---|
K | The typed cookie name. |
V | The cookie value type. |
| Parameter | Type | Description |
|---|---|---|
options | RawCookie<K, V> | ParsedCookieMap<K, V> | The cookie options or a parsed Cookie Map. |
Type: ParsedCookieMap<K, V> | false
Map if successful.false on failure.const cookieOptions: RawCookie = {
name : 'cookiename',
value : { test: 'value' },
path : '/specific-path',
priority : Priority.High,
expires : Date.now() + 20 * 60 * 1000,
domain : 'example.com',
secure : true,
httpOnly : false,
sameSite : SameSite.Lax,
maxAge : Date.now() + 30 * 60 * 1000,
partitioned : true,
}
Cookie.set( cookieOptions )
// or
Cookie.set( Coookie.parse( cookieOptions ) )
Cookie.delete()Delete a cookie by cookie name from Document.cookie.
| Parameter | Type | Description |
|---|---|---|
name | string | The cookie name to delete. |
Type: boolean
true on successfull.false on failure.Cookie.delete( 'some_cookie' )
LocalStorage ClassA browser-compatible implementation of localStorage.
import { LocalStorage } from '@alessiofrittoli/web-utils'
// or
import { LocalStorage } from '@alessiofrittoli/web-utils/storage/LocalStorage'
LocalStorage.key()Get storage item name by item numeric index.
| Parameter | Type | Description |
|---|---|---|
index | number | The item index in the storage. |
Type: string | null
null if n is greater than or equal to the number of key/value pairs.console.log( LocalStorage.key( 0 ) ) // Outputs: first item name if any.
LocalStorage.getLength()Get the number of key/value pairs.
Type: number
The number of key/value pairs.
console.log( LocalStorage.getLength() )
LocalStorage.get<T>()Get the current value associated with the given key, or undefined if the given key does not exist.
| Parameter | Description |
|---|---|
T | The expected item value type. |
| Parameter | Type | Description |
|---|---|---|
key | string | The item name. |
Type: T | undefined
key.undefined if the given key does not exist.LocalStorage.get<Date>( 'expiration' )
LocalStorage.set<T>()Sets the value of the pair identified by key to value, creating a new key/value pair if none existed for key previously.
Dispatches a storage event on Window objects holding an equivalent Storage object.
If a nullish or empty string value is provided, the LocalStorage.delete() method is invoked.
| Parameter | Description |
|---|---|
T | The item value type. |
| Parameter | Type | Description |
|---|---|---|
key | string | The item name. |
value | T | The item value. |
Type: DOMException
A "QuotaExceededError" DOMException exception if the new value couldn't be set. (Setting could fail if, e.g., the user has disabled storage for the site, or if the quota has been exceeded.)
LocalStorage.set<Date>( 'expiration', new Date() )
LocalStorage.delete()Removes the key/value pair with the given key, if a key/value pair with the given key exists.
Dispatches a storage event on Window objects holding an equivalent Storage object.
| Parameter | Type | Description |
|---|---|---|
key | string | The item name. |
LocalStorage.delete( 'expiration' )
LocalStorage.clear()Removes all key/value pairs, if there are any.
Dispatches a storage event on Window objects holding an equivalent Storage object.
LocalStorage.clear()
SessionStorage ClassA browser-compatible implementation of sessionStorage.
Same API References of LocalStorage Class is applied to the SessionStorage Class.
Please, refer to LocalStorage Class static methods API Reference for more informations.
import { SessionStorage } from '@alessiofrittoli/web-utils'
// or
import { SessionStorage } from '@alessiofrittoli/web-utils/storage/SessionStorage'
npm install
or using pnpm
pnpm i
Run the following command to test and build code for distribution.
pnpm build
warnings / errors check.
pnpm lint
Run all the defined test suites by running the following:
# Run tests and watch file changes.
pnpm test:watch
# Run tests in a CI environment.
pnpm test:ci
package.json file scripts for more info.Run tests with coverage.
An HTTP server is then started to serve coverage files from ./coverage folder.
⚠️ You may see a blank page the first time you run this command. Simply refresh the browser to see the updates.
test:coverage:serve
Contributions are truly welcome!
Please refer to the Contributing Doc for more information on how to start contributing to this project.
Help keep this project up to date with GitHub Sponsor.
If you believe you have found a security vulnerability, we encourage you to responsibly disclose this and NOT open a public issue. We will investigate all legitimate reports. Email security@alessiofrittoli.it to disclose any security vulnerabilities.
|
|
FAQs
Common TypeScript web utilities
We found that @alessiofrittoli/web-utils demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
Research
/Security News
Socket researchers investigate 4 malicious npm and PyPI packages with 56,000+ downloads that install surveillance malware.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.