一、介紹
sessionStorage 是HTML5新增的一個(gè)會(huì)話存儲(chǔ)對象列林，用于臨時(shí)保存同一窗口(或標(biāo)簽頁)的數(shù)據(jù)终吼，在關(guān)閉窗口或標(biāo)簽頁之后將會(huì)刪除這些數(shù)據(jù)。在JavaScript語言中可通過 window.sessionStorage 或 sessionStorage 調(diào)用此對象音念。
二沪饺、特點(diǎn)：
同源策略限制。若想在不同頁面之間對同一個(gè)sessionStorage進(jìn)行操作闷愤，這些頁面必須在同一協(xié)議整葡、同一主機(jī)名和同一端口下。(IE 8和9存儲(chǔ)數(shù)據(jù)僅基于同一主機(jī)名讥脐，忽略協(xié)議（HTTP和HTTPS）和端口號(hào)的要求)
單標(biāo)簽頁限制遭居。sessionStorage操作限制在單個(gè)標(biāo)簽頁中啼器，在此標(biāo)簽頁進(jìn)行同源頁面訪問都可以共享sessionStorage數(shù)據(jù)。
只在本地存儲(chǔ)俱萍。seesionStorage的數(shù)據(jù)不會(huì)跟隨HTTP請求一起發(fā)送到服務(wù)器端壳，只會(huì)在本地生效，并在關(guān)閉標(biāo)簽頁后清除數(shù)據(jù)枪蘑。(若使用Chrome的恢復(fù)標(biāo)簽頁功能损谦，seesionStorage的數(shù)據(jù)也會(huì)恢復(fù))。
存儲(chǔ)方式：seesionStorage的存儲(chǔ)方式采用key岳颇、value的方式照捡。value的值必須為字符串類型(傳入非字符串，也會(huì)在存儲(chǔ)時(shí)轉(zhuǎn)換為字符串话侧。true值會(huì)轉(zhuǎn)換為"true")栗精。
存儲(chǔ)上限限制：不同的瀏覽器存儲(chǔ)的上限也不一樣，但大多數(shù)瀏覽器把上限限制在5MB以下瞻鹏。
瀏覽器最小版本支持：支持sessionStorage的瀏覽器最小版本：IE8悲立、Chrome 5
適合場景：sessionStorage 非常適合SPA(單頁應(yīng)用程序)，可以方便在各業(yè)務(wù)模塊進(jìn)行傳值
三新博、屬性方法：
-
sessionStorage.length：返回一個(gè)整數(shù)级历，表示存儲(chǔ)在 sessionStorage 對象中的數(shù)據(jù)項(xiàng)(鍵值對)數(shù)量。
方法：
sessionStorage.key(int index)：返回當(dāng)前 sessionStorage 對象的第index序號(hào)的key名稱叭披。若沒有返回null寥殖。sessionStorage.getItem(string key)：返回鍵名(key)對應(yīng)的值(value)。若沒有返回null涩蜘。sessionStorage.setItem(string key, string value)：該方法接受一個(gè)鍵名(key)和值(value)作為參數(shù)嚼贡，將鍵值對添加到存儲(chǔ)中；如果鍵名存在同诫，則更新其對應(yīng)的值粤策。sessionStorage.removeItem(string key)：將指定的鍵名(key)從 sessionStorage 對象中移除。sessionStorage.clear()：清除 sessionStorage 對象所有的項(xiàng)误窖。
示例：
/**
* 構(gòu)造數(shù)據(jù)
*/
let userInfo = {
name: "小明",
age: 23
}
//存儲(chǔ)數(shù)據(jù),字符串方式存儲(chǔ)
sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
// 取值
const user = sessionStorage.getItem("userInfo")
console.log(JSON.parse(user).name) //小明
四叮盘、簡單用途
- 用戶在一個(gè)列表頁瀏覽時(shí)，點(diǎn)擊一個(gè)列表進(jìn)入詳情頁霹俺，返回要求記錄用戶剛剛瀏覽的位置柔吼，而不是重新刷新頁面到了頁面頂部。
//滾動(dòng)時(shí)保存滾動(dòng)位置
$(window).scroll(function () {
if ($(document).scrollTop() != 0) {
sessionStorage.setItem('offsetTop', $(document).scrollTop())
}
})
// onload時(shí)丙唧，取出并滾動(dòng)到保存位置
window.onload = function () {
var _offset = sessionStorage.getItem("offsetTop");
$(document).scrollTop(offsetTop);
};
