前言:
是什麼需求呢?--需求方要求使用者在乙個列表頁瀏覽時,點選乙個列表進入詳情頁,返回要求記錄使用者剛剛瀏覽的位置,而不是重新重新整理頁面到了頁面頂部。(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...