本地存储之sessionStorage
生活随笔
收集整理的這篇文章主要介紹了
本地存储之sessionStorage
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
源碼可以到GitHub上下載! sessionStorage: 關閉瀏覽器再打開將不保存數據 復制標簽頁會連同sessionStorage數據一同復制
復制鏈接地址打開網頁不會復制seessionStorage內的數據 清除緩存加載當前頁對頁面無影響
1) 同源策略限制。若想在不同頁面之間對同一個sessionStorage進行操作,這些頁面必須在同一協議、同一主機名和同一端口下。(IE 8和9存儲數據僅基于同一主機名,忽略協議(HTTP和HTTPS)和端口號的要求)
2) 單標簽頁限制。sessionStorage操作限制在單個標簽頁中,在此標簽頁進行同源頁面訪問都可以共享sessionStorage數據。
3) 只在本地存儲。seesionStorage的數據不會跟隨HTTP請求一起發送到服務器,只會在本地生效,并在關閉標簽頁后清除數據。(若使用Chrome的恢復標簽頁功能,seesionStorage的數據也會恢復)。
4) 存儲方式。seesionStorage的存儲方式采用key、value的方式。value的值必須為字符串類型(傳入非字符串,也會在存儲時轉換為字符串。true值會轉換為"true")。
5) 存儲上限限制:不同的瀏覽器存儲的上限也不一樣,但大多數瀏覽器把上限限制在5MB以下。
可訪問 http://dev-test.nemikor.com/web-storage/support-test/ 測試瀏覽器的存儲上限。 1 // sessionStorage使用示例 2 var username = document.getElementById("username"); // 獲取input username 3 var userpwd = document.getElementById("userpassword"); // 獲取input userpassword 4 var remember = document.getElementById("remember"); // 獲取記住賬號密碼 5 // 點擊復選框記住 賬號、密碼、復選框 6 function rememberValue() { 7 if (remember.checked == true) { 8 sessionStorage.setItem('user', username.value); 9 sessionStorage.setItem('pwd', userpwd.value); 10 sessionStorage.setItem('remember', remember.checked); 11 } else { 12 sessionStorage.removeItem("user"); 13 sessionStorage.removeItem("pwd"); 14 sessionStorage.removeItem("remember"); 15 // sessionStorage.clear();// 全部刪除 16 } 17 } 18 // 頁面加載完畢后從sessionStorage里讀取值并填入相應的標簽內 19 window.onload = function () { 20 username.value = sessionStorage.getItem("user"); 21 userpwd.value = sessionStorage.getItem("pwd"); 22 remember.checked = sessionStorage.getItem("remember"); 23 }
復制鏈接地址打開網頁不會復制seessionStorage內的數據 清除緩存加載當前頁對頁面無影響
1) 同源策略限制。若想在不同頁面之間對同一個sessionStorage進行操作,這些頁面必須在同一協議、同一主機名和同一端口下。(IE 8和9存儲數據僅基于同一主機名,忽略協議(HTTP和HTTPS)和端口號的要求)
2) 單標簽頁限制。sessionStorage操作限制在單個標簽頁中,在此標簽頁進行同源頁面訪問都可以共享sessionStorage數據。
3) 只在本地存儲。seesionStorage的數據不會跟隨HTTP請求一起發送到服務器,只會在本地生效,并在關閉標簽頁后清除數據。(若使用Chrome的恢復標簽頁功能,seesionStorage的數據也會恢復)。
4) 存儲方式。seesionStorage的存儲方式采用key、value的方式。value的值必須為字符串類型(傳入非字符串,也會在存儲時轉換為字符串。true值會轉換為"true")。
5) 存儲上限限制:不同的瀏覽器存儲的上限也不一樣,但大多數瀏覽器把上限限制在5MB以下。
可訪問 http://dev-test.nemikor.com/web-storage/support-test/ 測試瀏覽器的存儲上限。 1 // sessionStorage使用示例 2 var username = document.getElementById("username"); // 獲取input username 3 var userpwd = document.getElementById("userpassword"); // 獲取input userpassword 4 var remember = document.getElementById("remember"); // 獲取記住賬號密碼 5 // 點擊復選框記住 賬號、密碼、復選框 6 function rememberValue() { 7 if (remember.checked == true) { 8 sessionStorage.setItem('user', username.value); 9 sessionStorage.setItem('pwd', userpwd.value); 10 sessionStorage.setItem('remember', remember.checked); 11 } else { 12 sessionStorage.removeItem("user"); 13 sessionStorage.removeItem("pwd"); 14 sessionStorage.removeItem("remember"); 15 // sessionStorage.clear();// 全部刪除 16 } 17 } 18 // 頁面加載完畢后從sessionStorage里讀取值并填入相應的標簽內 19 window.onload = function () { 20 username.value = sessionStorage.getItem("user"); 21 userpwd.value = sessionStorage.getItem("pwd"); 22 remember.checked = sessionStorage.getItem("remember"); 23 }
?
本文轉載于:猿2048https://www.mk2048.com/blog/blog.php?id=ckhh0j&title=本地存儲之sessionStorage
總結
以上是生活随笔為你收集整理的本地存储之sessionStorage的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Hexo使用细节及各种问题
- 下一篇: canvas离屏技术与放大镜实现