HTML

Structure of content on the web

  • Web APIs

    Interfaces for building web applications

  • Learn
  • HTTP Observatory

    Scan a website for free

  • Web APIs
  • Window
  • Instance properties
    1. credentialless
    2. devicePixelRatio
    3. documentPictureInPicture
    4. event
    5. external
    6. fence
    7. fullScreen
    8. innerWidth
    9. launchQueue
    10. locationbar
    11. mozInnerScreenX
    12. mozInnerScreenY
    13. navigation
    14. orientation
    15. outerWidth
    16. scheduler
    17. screenX
    18. scrollMaxX
    19. scrollMaxY
    20. sessionStorage
    21. sharedStorage
    22. status
    23. trustedTypes
    24. atob()
    25. back()
    26. blur()
    27. captureEvents()
    28. clearImmediate()
    29. confirm()
    30. dump()
    31. find()
    32. forward()
    33. getDefaultComputedStyle()
    34. getScreenDetails()
    35. moveTo()
    36. prompt()
    37. queryLocalFonts()
    38. releaseEvents()
    39. requestFileSystem()
    40. scroll()
    41. scrollByLines()
    42. scrollByPages()
    43. setImmediate()
    44. setResizable()
    45. showDirectoryPicker()
    46. showModalDialog()
    47. showOpenFilePicker()
    48. showSaveFilePicker()
    49. sizeToContent()
    50. webkitConvertPointFromNodeToPage()
    51. webkitConvertPointFromPageToNode()
  • Events
    1. beforeprint
    2. cut
    3. error
    4. hashchange
    5. messageerror
    6. orientationchange
    7. pageswap
    8. resize
    9. scrollsnapchange
    10. scrollsnapchanging
    11. unload
    12. vrdisplayactivate
    13. vrdisplayconnect
    14. vrdisplaydeactivate
    15. vrdisplaydisconnect
    16. vrdisplaypresentchange
  • Inheritance
    1. Window.localStorage
    2. origin. sessionStorage is similar to localStorage; the difference is that while localStorage is partitioned by origin only, sessionStorage is partitioned by both origin and browser tabs (top-level browsing contexts). The data in sessionStorage is only kept for the duration of the page session.

      • Whenever a document is loaded in a particular tab in the browser, a unique page session gets created and assigned to that particular tab. That page session is accessible only in that particular tab. The main document, and all embedded browsing contexts (iframes), are grouped by their origin and each origin has access to its own separate storage area.
      • If the page has a Window.opener).
      • A page session lasts as long as the tab or the browser is open, and survives over page reloads and restores.
      • Opening a page in a new tab or window creates a new session with the value of the top-level browsing context, which differs from how session cookies work.
      • Closing the tab/window ends the session and clears the data in sessionStorage.

    • Value

    A Storage object which can be used to access the current origin's session storage space.

    Exceptions

    SecurityError

    Thrown in one of the following cases:

    • The origin is not a valid scheme/host/port tuple. This can happen if the origin uses the file: or data: schemes, for example.
    • The request violates a policy decision. For example, the user has configured the browsers to prevent the page from persisting data.

    Note that if the user blocks cookies, browsers will probably interpret this as an instruction to prevent the page from persisting data.

    Examples

    Basic usage

    js
    / Save data to sessionStorage
sessionStorage.setItem("key", "value");

/ Get saved data from sessionStorage
let data = sessionStorage.getItem("key");

/ Remove saved data from sessionStorage
sessionStorage.removeItem("key");

/ Remove all saved data from sessionStorage
sessionStorage.clear();

    Saving text between refreshes

    The following example autosaves the contents of a text field, and if the browser is refreshed, restores the text field content so that no writing is lost.

    js
    / Get the text field that we're going to track
let field = document.getElementById("field");

/ See if we have an autosave value
/ (this will only happen if the page is accidentally refreshed)
if (sessionStorage.getItem("autosave")) {
  / Restore the contents of the text field
  field.value = sessionStorage.getItem("autosave");
}

/ Listen for changes in the text field
field.addEventListener("change", () => {
  / And save the results into the session storage object
  sessionStorage.setItem("autosave", field.value);
});

    Note: Please refer to the Using the Web Storage API article for a full example.

    Specifications

    Specification
    HTML
    # dom-sessionstorage-dev

    Browser compatibility

    See also