一恃泪、sessionStorage定義及使用
1.定義
sessionStorage 用于臨時保存同一窗口(或標簽頁)的數(shù)據(jù)，在關閉窗口或標簽頁之后將會刪除這些數(shù)據(jù)坐儿。
2.使用
sessionStorage的寫入
1）sessionStorage.lastname = 'lastname' // 點(.)運算符
2）sessionStorage['lastname'] = 'lastname' // 方括號([])運算符
3）sessionStorage.setItem('lastname', 'lastname') // sessionStorage.setItem
sessionStorage的讀取
1）sessionStorage.lastname // 點(.)運算符
2）sessionStorage['lastname'] // 方括號([])運算符
3）sessionStorage.getItem('lastname') // sessionStorage.getItem
sessionStorage刪除
1）sessionStorage.removeItem('lastname') // 刪除指定內容
2）sessionStorage.clear() // 刪除sessionStorage存儲的所有內容
二律胀、sessionStorage的二次封裝
1.定義封裝緩存文件/common/session.js
// 對本地數(shù)據(jù)進行操作的相關方法 sessionStorage的封裝
const Session = {
? getItem(key) {
? ? const item = sessionStorage.getItem(key)
? ? // 判斷是字符串還是對象
? ? const result = /^[{\[].*[}\]]$/g.test(item)
? ? if (result) {
? ? ? return JSON.parse(item)
? ? } else {
? ? ? return item
? ? }
? },
? setItem(key, value) {
? ? // 判斷是字符串還是對象
? ? if (typeof value === 'string') {
? ? ? sessionStorage.setItem(key, value)
? ? } else {
? ? ? const item = JSON.stringify(value)
? ? ? sessionStorage.setItem(key, item)
? ? }
? },
? removeItem(key) {
? ? sessionStorage.removeItem(key)
? },
? clear() {
? ? sessionStorage.clear()
? }
}
export {
? Session
}
2.在main.js中使用
import {Session} from './common/session.js'
Vue.prototype.$session = Session
3.在頁面中使用
var lastname = 'lastname'
this.$session.setItem('lastname', lastname)
console.log(this.$session.getItem('lastname'))
三、localStorage定義及使用
1.定義
localStorage用于長久保存整個網站的數(shù)據(jù)貌矿，保存的數(shù)據(jù)沒有過期時間炭菌，直到手動去刪除。
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲 key/value 對的數(shù)據(jù)逛漫。
提示:?如果你只想將數(shù)據(jù)保存在當前會話中黑低，可以使用sessionStorage屬性， 改數(shù)據(jù)對象臨時保存同一窗口(或標簽頁)的數(shù)據(jù)酌毡，在關閉窗口或標簽頁之后將會刪除這些數(shù)據(jù)克握。
2.使用
localStorage的用法和sessionStorage基本一致，可參照上文sessionStorage的用法枷踏。這里就不再闡述了菩暗。
四、總結
1.區(qū)別
sessionStorage：生命周期是臨時旭蠕，僅在當前會話窗口有效停团，關閉頁面或瀏覽器數(shù)據(jù)就會自動被清除。sessionStorage的作用域是窗口掏熬、協(xié)議佑稠、主機名、端口孽江。
localStorage：生命周期是永久讶坯，除非主動清除localStorage信息，否則這些信息將一直存放在客戶端岗屏。localStorage的作用域是協(xié)議辆琅、主機名漱办、端口。一般的瀏覽器能存儲的是5MB左右
2.使用場景
sessionStorage/localStorage主要用于不同頁面之間的傳值婉烟。
3.特點
不同瀏覽器之間無法共享sessionStorage或localStorage中的數(shù)據(jù)娩井。
sessionStorage和localStorage可以使用統(tǒng)一的API接口。
sessionStorage和localStorage都只能存儲字符串類型似袁，對于復雜的對象可以使用ECMAScript提供的JSON.stringify(obj)將其轉成字符串洞辣，取出來時使用?JSON.parse(str)重新轉成對象。由于在開發(fā)過程中容易忘記將復雜的對象轉換成字符串來進行存儲昙衅，而對sessionStorage/localStorage的二次封裝很好的解決了這個問題扬霜。
sessionStorage或localStorage是HTML5的新屬性，所以需要較新的瀏覽器才支持而涉。
