Session cookies and Window.sessionStorage solve different problems.
Cookies
Cookies are meant to pass data between a browser and server. When your browser stores cookies for a website, future requests to the site will include the cookies associated with this site (HTTP Cookie header). The server can also update your browser's cookies with the Set-Cookie HTTP response header.
Session cookies are often used to maintain a "server session" by passing a session token to the server on every request. The server uses this token to look up session data on the server associated with the token.
Web Storage API
The Web Storage API (localStorage and sessionStorage) is meant for storing data only within the browser. This data is not automatically passed between the browser and server.
Session cookie vs sessionStorage
Concept of "session"
Session cookies and sessionStorage have a different concept for a "session".
For session cookies, a session is shared between all browser tabs accessing the same site, and it ends when all browser windows are closed.
For sessionStorage, each tab (or "browsing context") has its own unique session, and the session ends when the tab is closed. This could be thought of more like a "tab session" than a "browser session".
So if you want to share data between multiple tabs, sessionStorage alone won't do the trick. You can use localStorage, session cookies, or other alternatives to synchronize this data.
Storage size
Cookies are much more limited in size than sessionStorage. This makes sense if you understand that cookies are passed to the server for every request. The maximum sizes vary by browser. Take a look at these StackOverflow posts for more details:
Defending against XSS
Cookies marked with the HttpOnly
attribute are inaccessible to JavaScript running on the page. This can be handy to defend against Cross Site Scripting (XSS) attacks.