3分鐘學會sessionStorage用法

2022-02-14 02:32:10 字數 1671 閱讀 8987

前言:

是什麼需求呢?--需求方要求使用者在乙個列表頁瀏覽時,點選乙個列表進入詳情頁,返回要求記錄使用者剛剛瀏覽的位置,而不是重新重新整理頁面到了頁面頂部。(ps:如果使用者好不容易翻到了第幾

十、幾百乃至幾千條時,難道要使用者再重頭開始?可能這個時候跳出率就高了,這個分析的確挺有道理,無力反駁...)。

那麼開始腦洞大開了,當時腦子裡出來各種解決方案:

1、將瀏覽時的滾動位置存到cookie裡,進到這個頁面再取。那多久銷毀呢?好像不靈活...pass

2、將詳情頁通過ifram或者彈框方式引到當前頁,通過操作關閉當前彈窗(那麼在已經完成的頁面上再重構,加操作按鈕?那麼載入效率和體驗呢?...反正不看好)

3、將瀏覽時的滾動位置傳到伺服器端,載入頁面時,根據使用者來取最後瀏覽的位置,各種引數傳來調去(跟方案一很類似)

4、通過h5本地儲存的方式將資料存起來,需要時取值(沒啥經驗,先研究一下吧,好像挺靠譜)

接下來先了解一下什麼是本地儲存吧!

html5 web 儲存,乙個比cookie更好的本地儲存方式。

首先我們先了解一下: 

使用html5可以在本地儲存使用者的瀏覽資料。

早些時候,本地儲存使用的是 cookie。但是web 儲存需要更加的安全與快速. 這些資料不會被儲存在伺服器上,但是這些資料只用於使用者請求**資料上.它也可以儲存大量的資料,而不影響**的效能.

資料以 鍵/值 對存在, web網頁的資料只允許該網頁訪問使用。

客戶端儲存資料的兩個物件為:

了解完sessionstorage之後是不是很符合我們的需求呢?將資料存到 session中,管你前進後退還是重新整理,資料依然在,關閉視窗後再進頁面才會清空資料,那麼完全符合需求啊,看到這玩意簡直激動快要淚奔了!!!

再理一下實現思路,①頁面滾動,將滾動位置存到session中 → ②再次進到頁面中,到session中取出上次儲存的瀏覽位置 → ③滾動到對應位置

這傢伙簡直好玩到嗷嗷叫啊,睜大眼睛看重點咯!

這裡只介紹setitem和getitem,當然還有什麼removeitem刪除key、clear清除所有的key/value操作。

setitem儲存value

用途:將value儲存到key欄位

用法:.setitem( key, value)

**示例:

sessionstorage.setitem("key", "value"); 	localstorage.setitem("site", "js8.in");

getitem獲取value

用途:獲取指定key本地儲存的值

用法:.getitem(key)

**示例:

var value = sessionstorage.getitem("key"); 	var site = localstorage.getitem("site");

//滾動時儲存滾動位置

$(window).scroll(function() 

});

//onload時,取出並滾動到上次儲存位置

window.onload = function()

;

可以去跑跑效果,肯定意想不到!

3分鐘學會氣泡排序

思路 兩個元素比較,大的放到右邊 從頭開始依次比較相鄰的兩個元素,目的是找出最大的乙個元素放到末尾,這個元素不再參與比較 第二次仍然從頭開始,把第二大的元素放到正確的位置 一共比較 len 1 趟,因為已經確定了 len 1 個元素的位置,那麼第 n 個肯定是最小的那個了 第 i 趟的比較次數為 l...

3 分鐘學會插入排序

思路 將待排元素插入到有序陣列中的合適位置,後邊的元素依次向後移動 將陣列分為有序與待排兩個區域 待排區從 1 開始,依次取出每個元素插入有序區,一共進行 n 1 趟 從有序區後面開始比較,有序元素 待排元素,有序元素則向後移動 實現public class solution else j 1 時,...

3 分鐘學會歸併排序

解題思路 分解 將待排序分成兩部分,對每部分進行排序 合併 將排序好的部分進行合併 遞迴 遞推公式 merge sort p.q merge merge sort p.r merge sort r 1.q 終止條件 p q,分組中元素只剩下 1 個 演算法實現 public class soluti...