當前位置:首頁 » 網頁前端 » webstorageapi
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

webstorageapi

發布時間: 2022-10-04 11:22:44

① 怎麼判斷瀏覽器是否支持localstorage

localStorage作為HTML5本地存儲web storage特性的API之一,主要作用是將數據保存在客戶端中,而客戶端一般是指上海網站設計用戶的計算機。在移動設備上,由於大部分瀏覽器都支持web storage特性,因此在android和ios等智能手機上的web瀏覽器都能正常使用該特性。
localStorage保存的數據,一般情況下是永久保存的,也就是說只要採用localstorage保存信息,數據便一直存儲在用戶的客戶端中。即使用戶關閉當前web瀏覽器後重新啟動,數據讓然存在。知道用戶或程序明確制定刪除,數據的生命周期才會結束。

在安全性方面,localstorage是域內安全的,即localstorage是基於域的。任何在該域內的所有頁面,都可以訪問localstorage數據。但讓然存在一個問題,就是各個瀏覽器廠商的瀏覽器之間的數據是各自獨立的。也就是說,如果在firefox中使用localstorage存儲一組數據,在chrome瀏覽器下是無法讀取的。同樣,由於localstorage數據是保存在用戶的設備中的,因此同一個應用程序在不同設備上保存的數據是不同的。

(望樓主採納哦)

② Cookie 和 Storage API 區別與詳解

它們都是瀏覽器數據存儲的方案,是用於解決 數據持久化 的問題。除此之外,數據也可以存儲在內存中(比如掛載到 window 等全局對象下),但這種方式每當頁面刷新就會丟失。

下面分別從幾個方面,詳細地介紹 Cookie 、 sessionStorage 、 localStorage 的區別。

請注意,其中 Cookie 的空間大小指的是 name 、 value 以及 = 號。

另外,這三個不同瀏覽器下可能會有細微的差異,可忽略。

下表為網上收集(非當前實測結論),看一眼知道有限制這回事就好。

鑒於各瀏覽器對 Cookie 的空間、數量限制不完全相同,為了較好地兼容,建議如下:

沒錯,面試官問到這么說吧,應該就 OK 了。

另外,與超出空間限制不同的是,超出數量限制之後,是可以繼續添加 Cookie 的,但不同瀏覽器有不同的策略:一些是替換掉最先(老)的 Cookie ,有些則是隨機替換。作簡單了解就好,一般項目不會設那麼多的,而且 Cookie 過期瀏覽器是會自動清除的。

這塊內容比較多...

鋪墊 - 了解同源和同站的區別

區別如下:

鋪墊 - 頂級域名和二級域名的認知

關於頂級域名、二級域名,也有很多認知問題。

在國內,很多資料認為,頂級域和一級域是分開的。比如 ..com ,如果按照這種方式劃分,那麼 .com 是頂級域名, ..com 就是一級域名。好像阿里雲就是這樣定義的。

而我更偏向於認為, ..com 屬於二級域名。不用過分糾結,在團隊內統一即可。

eTLD (Top-Level Domains)表示有效頂級域名,那麼 eTLD + 1 就表示二級域名。例如:

其中 eTLD 是 .com.cn ,那麼 eTLD + 1 就是 .example.com.cn 。關於 eTLD 更多請看 這里 。

鋪墊 - 區分同源和同站

先看下,完整的 URL(網址)構成如下:

簡單來說,只要二級域名相同,就屬於同站。同源則要求更嚴格。因此同源一定同站,反之則不一定。

以下例子,同站,但不同源。

正題 - 三者的作用域

理解這些很重要,為什麼這么說呢?

拓展 - 作用域引發的問題

很多公司,不是每個 Web 項目對應一個三級域名。

這些都很常見,那麼問題來了。它們很多都是同源、同站的。假設按小項目劃分場景,我在 a 項目中設置了一個 sessionStorage 會話級緩存,那麼當前從 a 項目跳轉至 b 項目時, b 是可以獲取到 a 項目的所有 sessionStorage 的,反之也成立。如果 a 和 b 項目中某個 sessionStorage 的 key 不小心設置成相同的話,那很可能就會影響到對方。 localStorage 同理。至於 Cookie 的話,由於它的空間限制最大隻允許 4K,因此不適宜存過多數據,一般會存一些像鑒權信息等比較多。同個公司,業務的用戶鑒權等是相似的,所以 Cookie 的訪問機制也不會有太大的影響。

針對這些問題,建議是非必要的話,將數據存在內存中,比如用 Vuex、Rex、MobX 等狀態管理工具來維護應用的狀態。一是信息更不容易暴露,而是可以減少 IO 的讀寫。但是,這樣的話,就要解決數據持久化的問題,因為在內存中的話,只要刷新頁面就會丟失。怎麼解決?

以 Rex 為例,在創建 Store 時,是可以傳入一個初始狀態的,它的值取下面這個會話緩存即可。只要監聽到狀態發生變化變化,並設置或更新 sessionStorage 級別的緩存,將狀態緩存起來即可。比如:

注意 - sessionStorage 鮮為人知的點(冷門)

下面例子,均在同源情況下。假設有兩個同源頁面: A 頁面、B 頁面對應 URL 為 page_a_url 、 page_b_url 。

示例一:

示例二:將上述第二步改成下面這樣:

結果又是什麼呢?直接看下結果:

結論:

總結 - 作用域

sessionStorage 和 localStorage 不會主動參與與伺服器的通信。

Cookie 是保存在瀏覽器上的一小型文本文件。在每次與伺服器的通信中都會攜帶在 HTTP 請求頭之中。

Q1:storage 事件的迷惑行為

首先,注冊 storage 事件監聽器,它 只能 監聽 其他同源頁面 的緩存 發生改變 時,它才會被觸發。

得出幾個結論:

Q2:當 localStorage 超過 5M 的空間限制之後,若再次 setItem 會怎樣?

答案顯而易見,這次 setItem() 將會失敗,且會拋出錯誤。針對這種情況,可以做一些處理,比如清空再重新記錄等...

Q3:在 Safari 無痕模式下,對 sessionStorage 操作可能會拋出異常

請看這個帖子: html5 localStorage error with Safari: "QUOTA_EXCEEDED_ERR: DOM Exception 22: An attempt was made to add something to storage that exceeded the quota."

Q4:sessionStorage 在 iframe 的問題

前面提到頂級窗口和 iframe 窗口的頁面都是同源的情況下,sessionStorage 是可共享的。但不完全是,比如受 iframe 的 sandbox 屬性影響,分為兩種情況:

假設兩個頁面同源;情況一 sessionStorage 不共享,在 iframe 中是一個全新的 sessionStorage 對象。情況二則共享 sessionStorage 。

③ HTML5的心功能

html5實際上是一種編程語言,不過是網頁上的。由於html5還在開發中,所以還不完善。比如說可以看網頁視頻什麼的。

摘自維基
HTML5是HTML下一個主要的修訂版本,現在仍處於發展階段。目標是取代1999年所制定的HTML 4.01和XHTML 1.0 標准,以期能在互聯網應用迅速發展的時候,使網路標准達到符合當代的網路需求。廣義論及HTML5時,實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。它希望能夠減少瀏覽器對於需要插件的豐富性網路應用服務(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight,與Oracle JavaFX的需求,並且提供更多能有效增強網路應用的標准集。

④ HTLM5標準是什麼

HTML 5是HTML下一個的主要修訂版本,現在仍處於發展階段。目標是取代1999年所定訂的HTML 4.01和XHTML 1.0 標准,以期能在互聯網應用迅速發展的時候,使網路標准達到符合當代的網路需求。廣義論及HTML5時,實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。它希望能夠減少瀏覽器對於需要插件的豐富性網路應用服務(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight,與Oracle JavaFX的需求,並且提供更多能有效增強網路應用的標准集。

新標記

HTML 5提供了一些新的元素和屬性,反映典型的現代用法網站。其中有些是技術上類似<div>和<span>標簽,但有一定含義,例如<nav>(網站導航塊)和<footer>。這種標簽將有利於搜索引擎的索引整理、小屏幕裝置和視障人士使用。同時為其他瀏覽要素提供了新的功能,通過一個標准介面,如<audio>和<video>標記。[3]
一些過時的HTML 4標記將取消,其中包括純粹用作顯示效果的標記,如<font>和<center>,因為它們已經被CSS取代。還有一些透過DOM的網路行為。

新應用程序介面(API)

除了原先的DOM介面,HTML5增加了更多樣化的API[4]:
即時二維繪圖
Convas API:有關動態產出與渲染圖形、圖表、圖像和動畫的API。
定時媒體播放
HTML5 音頻與視頻:HTML5里新增的元素,它們為開發者提供了一套通用的、整合的、腳本式的處理音頻與視頻的API,而無需安裝任何插件。
儲存
Web Storage API:HTML5 Web存儲(也就是 DOMStorage),該API令在多個Web請求間持久化資料變得簡單。
離線
編輯
拖放
通訊/網路
Communication APIs:構建實時和跨源(cross-origin)通訊的兩大基礎: 跨文檔通訊(Cross Document Messaging)與 XMLHttpRequest Level 2。
後退按鈕管理
MIME和協議處理程序時表頭登記
Geolocation API:使用者可共享地理位置,並在Web應用的協助下享用位置感知服務(location-aware services)。
Web Sockets API:定義全雙工傳輸的通訊通道,它在Web之上通過單個Sockets進行工作。
WebSocket是HTML5中非常重要的新特性,允許使用者在瀏覽器中實作雙向通信,以達伺服器得以實作對映的資料即時推送技術,這個技術的意義在於我們可以通過網頁實作以往難以達成的應用。使用者不再需要頻繁的更新頁面以獲取新資料,新資料會自動由伺服器端推送至使用者的電腦畫面上。
Web Workers API:為Web應用提供後台處理的能力。

與HTML 4的不同之處

以下為大略的不同之處,與例子:
新的解析順序:不再基於SGML
新的元素:section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr
input元素的新屬性:日期和時間,email, url
新的通用屬性:ping(用於a與area), charset(用於meta), async(用於script)
全域屬性:id, tabindex, repeat
移除元素:acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, s, strike, tt, u

異常處理

HTML5(text/html)瀏覽器將在錯誤語法的處理上更加靈活。HTML5在設計時保證舊的瀏覽器能夠安全地忽略掉新的HTML5代碼。與HTML4.01相比,HTML5給出了解析的詳細規則,力圖讓不同的瀏覽器即使在發生語法錯誤時也能返回相同的結果。

⑤ localstorage怎麼設置過期時間

1、local storage沒有過期時間的功能,應該是指sessionStorage,
2、sessionStorage與localStorage 同屬 webstorage 規范,API 一致不過是帶有生命周期的,其生命周期 以頁面 session 為界(不能自己設置過期時間)。
3、只要瀏覽器保持打開,頁面刷新和重載都會保持 sessionStorage 內容,關閉的時候清除。新建標簽頁和新建窗口則屬於新的 session。

⑥ html5 web storage和cookie的區別

1、存儲大小不同
webStorage存儲大小有限制,可達5M或更大;cookie存儲數據不能超過4K

2、數據有效期不同
webStorage始終有效,窗口或瀏覽器關閉也一直保存;cookie只有設置的cookie過期時間之前一直有效

3、事件通知機制
webStorage支持事件通知機制,而cookie則不支持

4、API介面
webStorage自帶一些API介面,可以調用,而cookie沒有

⑦ cookie,sessionStorage localStorage之間的區別和使用

1.cookie:存儲在用戶本地終端上的數據。有時也用cookies,指某些網站為了辨別用戶身份,進行session跟蹤而存儲在本地終端上的數據,通常經過加密。一般應用最典型的案列就是判斷注冊用戶是否已經登過該網站。
2.HTML5 提供了兩種在客戶端存儲數據的新方法:..兩者都是僅在客戶端(即瀏覽器)中保存,不參與和伺服器的通信;
localStorage - 沒有時間限制的數據存儲,第二天、第二周或下一年之後,數據依然可用。
如何創建和訪問 localStorage:
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
下面的例子對用戶訪問頁面的次數進行計數:
復制代碼
復制代碼
<script type="text/javascript">
if (localStorage.pagecount){
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
復制代碼
復制代碼
sessionStorage - 針對一個 session 的數據存儲,當用戶關閉瀏覽器窗口後,數據會被刪除。
創建並訪問一個 sessionStorage:
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
下面的例子對用戶在當前 session 中訪問頁面的次數進行計數:
復制代碼
復制代碼
<script type="text/javascript">
if (sessionStorage.pagecount){
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else{
sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>
復制代碼
復制代碼
sessionStorage 、localStorage 和 cookie 之間的區別
共同點:都是保存在瀏覽器端,且同源的。
區別:cookie數據始終在同源的http請求中攜帶(即使不需要),即cookie在瀏覽器和伺服器間來回傳遞;cookie數據還有路徑(path)的概念,可以限制cookie只屬於某個路徑下。存儲大小限制也不同,cookie數據不能超過4k,同時因為每次http請求都會攜帶cookie,所以cookie只適合保存很小的數據,如會話標識。
而sessionStorage和localStorage不會自動把數據發給伺服器,僅在本地保存。sessionStorage和localStorage 雖然也有存儲大小的限制,但比cookie大得多,可以達到5M或更大。
數據有效期不同,sessionStorage:僅在當前瀏覽器窗口關閉前有效,自然也就不可能持久保持;localStorage:始終有效,窗口或瀏覽器關閉也一直保存,因此用作持久數據;cookie只在設置的cookie過期時間之前一直有效,即使窗口或瀏覽器關閉。
作用域不同,sessionStorage不在不同的瀏覽器窗口中共享,即使是同一個頁面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知機制,可以將數據更新的通知發送給監聽者。Web Storage 的 api 介面使用更方便。

⑧ Web前端崗位面試題有哪些

前端面試題匯總,基本上會有四大類問題,具體如下:
一、HTML

1、Doctype作用?嚴格模式與混雜模式如何區分?它們有何意義?

2、HTML5 為什麼只需要寫 <!DOCTYPE HTML>?
3、行內元素有哪些?塊級元素有哪些? 空(void)元素有那些?
4、頁面導入樣式時,使用link和@import有什麼區別?
5、介紹一下你對瀏覽器內核的理解?
6、常見的瀏覽器內核有哪些?
7、html5有哪些新特性、移除了那些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5?
8、簡述一下你對HTML語義化的理解?
9、HTML5的離線儲存怎麼使用,工作原理能不能解釋一下?
10、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢?
11、請描述一下 cookies,sessionStorage 和 localStorage 的區別?
12、iframe有那些缺點?
13、Label的作用是什麼?是怎麼用的?(加 for 或 包裹)
14、HTML5的form如何關閉自動完成功能?
15、如何實現瀏覽器內多個標簽頁之間的通信? (阿里)
16、webSocket如何兼容低瀏覽器?(阿里)
17、頁面可見性(Page Visibility)API 可以有哪些用途?
18、如何在頁面上實現一個圓形的可點擊區域?
19、實現不使用 border 畫出1px高的線,在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
20、網頁驗證碼是幹嘛的,是為了解決什麼安全問題?
21、tite與h1的區別、b與strong的區別、i與em的區別?

二、css

1、介紹一下標準的CSS的盒子模型?與低版本IE的盒子模型有什麼不同的?

2、CSS選擇符有哪些?哪些屬性可以繼承?
3、CSS優先順序演算法如何計算?
4、CSS3新增偽類有那些?
5、如何居中div?如何居中一個浮動元素?如何讓絕對定位的div居中?
6、display有哪些值?說明他們的作用。
7、position的值relative和absolute定位原點是?
8、CSS3有哪些新特性?
9、請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景?
10、用純CSS創建一個三角形的原理是什麼?

11、一個滿屏 品 字布局 如何設計?

三、常見兼容性問題?


  1. 1、li與li之間有看不見的空白間隔是什麼原因引起的?有什麼解決辦法?
    2、經常遇到的瀏覽器的兼容性有哪些?原因,解決方法是什麼,常用hack的技巧 ?
    3、為什麼要初始化CSS樣式。
    4、absolute的containing block計算方式跟正常流有什麼不同?
    5、CSS里的visibility屬性有個collapse屬性值是幹嘛用的?在不同瀏覽器下以後什麼區別?
    6、position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣?
    7、對BFC規范(塊級格式化上下文:block formatting context)的理解?
    8、CSS權重優先順序是如何計算的?
    9、請解釋一下為什麼會出現浮動和什麼時候需要清除浮動?清除浮動的方式
    10、移動端的布局用過媒體查詢嗎?
    11、使用 CSS 預處理器嗎?喜歡那個?
    12、CSS優化、提高性能的方法有哪些?
    13、瀏覽器是怎樣解析CSS選擇器的?
    14、在網頁中的應該使用奇數還是偶數的字體?為什麼呢?
    15、margin和padding分別適合什麼場景使用?
    16、抽離樣式模塊怎麼寫,說出思路,有無實踐經驗?[阿里航旅的面試題]
    17、元素豎向的百分比設定是相對於容器的高度嗎?
    18、全屏滾動的原理是什麼?用到了CSS的那些屬性?
    19、什麼是響應式設計?響應式設計的基本原理是什麼?如何兼容低版本的IE?
    20、視差滾動效果,如何給每頁做不同的動畫?(回到頂部,向下滑動要再次出現,和只出現一次分別怎麼做?)
    21、::before 和 :after中雙冒號和單冒號 有什麼區別?解釋一下這2個偽元素的作用。
    22、如何修改chrome記住密碼後自動填充表單的黃色背景 ?
    23、你對line-height是如何理解的?
    24、設置元素浮動後,該元素的display值是多少?(自動變成display:block)
    25、怎麼讓Chrome支持小於12px 的文字?
    26、讓頁面里的字體變清晰,變細用CSS怎麼做?(-webkit-font-smoothing: antialiased;)
    27、font-style屬性可以讓它賦值為「oblique」 oblique是什麼意思?
    28、position:fixed;在android下無效怎麼處理?
    29、如果需要手動寫動畫,你認為最小時間間隔是多久,為什麼?(阿里)
    30、display:inline-block 什麼時候會顯示間隙?(攜程)
    31、overflow: scroll時不能平滑滾動的問題怎麼處理?
    32、有一個高度自適應的div,裡面有兩個div,一個高度100px,希望另一個填滿剩下的高度。
    33、png、jpg、gif 這些圖片格式解釋一下,分別什麼時候用。有沒有了解過webp?
    34、什麼是Cookie 隔離?(或者說:請求資源的時候不要讓它帶cookie怎麼做)
    35、style標簽寫在body後與body前有什麼區別?

    四、JavaScript

    1、介紹JavaScript的基本數據類型。
    2、說說寫JavaScript的基本規范?
    3、JavaScript原型,原型鏈 ? 有什麼特點?
    4、JavaScript有幾種類型的值?(堆:原始數據類型和 棧:引用數據類型),你能畫一下他們的內存圖嗎?
    5、Javascript如何實現繼承?
    6、Javascript創建對象的幾種方式?
    7、Javascript作用鏈域?
    8、談談This對象的理解。
    9、eval是做什麼的?
    10、什麼是window對象? 什麼是document對象?
    11、null,undefined的區別?
    12、寫一個通用的事件偵聽器函數(機試題)。
    13、[「1」, 「2」, 「3」].map(parseInt) 答案是多少?
    14、關於事件,IE與火狐的事件機制有什麼區別? 如何阻止冒泡?
    15、什麼是閉包(closure),為什麼要用它?
    16、javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼?
    17、如何判斷一個對象是否屬於某個類?
    18、new操作符具體幹了什麼呢?
    19、用原生JavaScript的實現過什麼功能嗎?
    20、Javascript中,有一個函數,執行時對象查找時,永遠不會去查找原型,這個函數是?
    21、對JSON的了解?
    22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解釋一下這段代碼的意思嗎?
    23、js延遲載入的方式有哪些?
    24、Ajax 是什麼? 如何創建一個Ajax?
    25、同步和非同步的區別?
    26、如何解決跨域問題?
    27、頁面編碼和被請求的資源編碼如果不一致如何處理?
    28、模塊化開發怎麼做?
    29、AMD(Moles/Asynchronous-Definition)、CMD(Common Mole

    Definition)規范區別?
    30、requireJS的核心原理是什麼?(如何動態載入的?如何避免多次載入的?如何 緩存的?)
    31、讓你自己設計實現一個requireJS,你會怎麼做?
    32、談一談你對ECMAScript6的了解?
    33、ECMAScript6 怎麼寫class么,為什麼會出現class這種東西?
    34、非同步載入的方式有哪些?
    35、documen.write和 innerHTML的區別?
    36、DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?
    37、.call() 和 .apply() 的含義和區別?
    38、數組和對象有哪些原生方法,列舉一下?
    39、JS 怎麼實現一個類。怎麼實例化這個類
    40、JavaScript中的作用域與變數聲明提升?
    41、如何編寫高性能的Javascript?
    42、那些操作會造成內存泄漏?
    43、JQuery的源碼看過嗎?能不能簡單概況一下它的實現原理?
    44、jQuery.fn的init方法返回的this指的是什麼對象?為什麼要返回this?
    45、jquery中如何將數組轉化為json字元串,然後再轉化回來?
    46、jQuery 的屬性拷貝(extend)的實現原理是什麼,如何實現深拷貝?
    47、jquery.extend 與 jquery.fn.extend的區別?
    48、jQuery 的隊列是如何實現的?隊列可以用在哪些地方?
    49、談一下Jquery中的bind(),live(),delegate(),on()的區別?
    50、JQuery一個對象可以同時綁定多個事件,這是如何實現的?
    51、是否知道自定義事件。jQuery里的fire函數是什麼意思,什麼時候用?
    52、jQuery 是通過哪個方法和 Sizzle 選擇器結合的?(jQuery.fn.find()進入Sizzle)
    53、針對 jQuery性能的優化方法?
    54、Jquery與jQuery UI有啥區別?
    55、JQuery的源碼看過嗎?能不能簡單說一下它的實現原理?
    56、jquery 中如何將數組轉化為json字元串,然後再轉化回來?
    57、jQuery和Zepto的區別?各自的使用場景?
    58、針對 jQuery 的優化方法?
    59、Zepto的點透問題如何解決?
    60、jQueryUI如何自定義組件?
    61、需求:實現一個頁面操作不會整頁刷新的網站,並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案?
    62、如何判斷當前腳本運行在瀏覽器還是node環境中?(阿里)
    63、移動端最小觸控區域是多大?
    64、jQuery 的 slideUp動畫 ,如果目標元素是被外部事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滯後的反復執行,該如何處理呢?
    65、把 Script 標簽 放在頁面的最底部的body封閉之前 和封閉之後有什麼區別?瀏覽器會如何解析它們?
    66、移動端的點擊事件的有延遲,時間是多久,為什麼會有? 怎麼解決這個延時?(click 有 300ms 延遲,為了實現safari的雙擊事件的設計,瀏覽器要知道你是不是要雙擊操作。)
    67、知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能講出他們各自的優點和缺點么?
    68、Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法?
    69、解釋JavaScript中的作用域與變數聲明提升?
    70、那些操作會造成內存泄漏?
    71、JQuery一個對象可以同時綁定多個事件,這是如何實現的?
    72、Node.js的適用場景?
    (如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
    73、解釋一下 Backbone 的 MVC 實現方式?
    74、什麼是「前端路由」?什麼時候適合使用「前端路由」? 「前端路由」有哪些優點和缺點?
    75、知道什麼是webkit么? 知道怎麼用瀏覽器的各種工具來調試和debug代碼么?
    76、如何測試前端代碼么? 知道BDD, TDD, Unit Test么? 知道怎麼測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?
    77、前端templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用?
    78、簡述一下 Handlebars 的基本用法?
    79、簡述一下 Handlerbars 的對模板的基本處理流程, 如何編譯的?如何緩存的?
    80、用js實現千位分隔符?(來源:前端農民工,提示:正則+replace)
    檢測瀏覽器版本版本有哪些方式?
    81、我們給一個dom同時綁定兩個點擊事件,一個用捕獲,一個用冒泡,你來說下會執行幾次事件,然後會先執行冒泡還是捕獲

⑨ 怎麼通過代碼實現seesionstorage和localstorage的切換

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web請求之間保存數據。有了本地數據,就可以避免數據在瀏覽器和伺服器間不必要地來回傳遞。 sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數據,其中sessionStorage的概念很特別,引入了一個「瀏覽器窗口」的概念。sessionStorage是在同源的同窗口(或tab)中,始終存在的數據。也就是說只要這個瀏覽器窗口沒有關閉,即使刷新頁面或進入同源另一頁面,數據仍然存在。關閉窗口後,sessionStorage即被銷毀。同時「獨立」打開的不同窗口,即使是同一頁面,sessionStorage對象也是不同的。 Web Storage帶來的好處:減少中國絡流量:一旦數據保存在本地後,就可以避免再向伺服器請求數據,因此減少不必要的數據請求,減少數據在瀏覽器和伺服器間不必要地來回傳遞。快速顯示數據:性能好,從本地讀數據比通過中國絡從伺服器獲得數據快得多,本地數據可以即時獲得。再加上中國頁本身也可以有緩存,因此整個頁面和數據都在本地的話,可以立即顯示。臨時存儲:很多時候數據只需要在用戶瀏覽一組頁面期間使用,關閉窗口後數據就可以丟棄了,這種情況使用sessionStorage非常方便。 瀏覽器本地存儲與伺服器端存儲之間的區別其實數據既可以在瀏覽器本地存儲,也可以在伺服器端存儲。 瀏覽器端可以保存一些數據,需要的時候直接從本地獲取,sessionStorage、localStorage和cookie都由瀏覽器存儲在本地的數據。 伺服器端也可以保存所有用戶的所有數據,但需要的時候瀏覽器要向伺服器請求數據。一.伺服器端可以保存用戶的持久數據,如資料庫和雲存儲將用戶的大量數據保存在伺服器端。二.伺服器端也可以保存用戶的臨時會話數據。伺服器端的session機制,如jsp的 session 對象,數據保存在伺服器上。實現上,伺服器和瀏覽器之間僅需傳遞session id即可,伺服器根據session id找到對應用戶的session對象。會話數據僅在一段時間內有效,這個時間就是server端設置的session有效期。 伺服器端保存所有的用戶的數據,所以伺服器端的開銷較大,而瀏覽器端保存則把不同用戶需要的數據分布保存在用戶各自的瀏覽器中。瀏覽器端一般只用來存儲小數據,而伺服器可以存儲大數據或小數據。伺服器存儲數據安全一些,瀏覽器只適合存儲一般數據。 sessionStorage 、localStorage 和 cookie 之間的區別 共同點:都是保存在瀏覽器端,且同源的。區別:cookie數據始終在同源的http請求中攜帶(即使不需要),即cookie在瀏覽器和伺服器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給伺服器,僅在本地保存。cookie數據還有路徑(path)的概念,可以限制cookie只屬於某個路徑下。存儲大小限制也不同,cookie數據不能超過四k,同時因為每次http請求都會攜帶cookie,所以cookie只適合保存很小的數據,如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制,但比cookie大得多,可以達到5M或更大。數據有效期不同,sessionStorage:僅在當前瀏覽器窗口關閉前有效,自然也就不可能持久保持;localStorage:始終有效,窗口或瀏覽器關閉也一直保存,因此用作持久數據;cookie只在設置的cookie過期時間之前一直有效,即使窗口或瀏覽器關閉。作用域不同,sessionStorage不在不同的瀏覽器窗口中共享,即使是同一個頁面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知機制,可以將數據更新的通知發送給監聽者。Web Storage 的 api 介面使用更方便。 sessionStorage 和 localStorage 之間的區別見上面的區別三、四 sessionStorage與頁面 js 數據對象的區別頁面中一般的 js 對象或數據的生存期是僅在當前頁面有效,因此刷新頁面或轉到另一頁面這樣的重新載入頁面的情況,數據就不存在了。而sessionStorage 只要同源的同窗口(或tab)中,刷新頁面或進入同源的不同頁面,數據始終存在。也就是說只要這個瀏覽器窗口沒有關閉,載入新頁面或重新載入,數據仍然存在。 cookie,容量四kb,默認各種瀏覽器都支持,缺陷就是每次請求,瀏覽器都會把本機存的cookies發送到伺服器,無形中浪費帶寬。 userdata,只有ie支持,單個容量陸四kb,每個域名最多可存一0個共計陸四0k數據。默認保存在C:\Documents and Settings\Administrator\UserData\目錄下,保存格式為xml。關於userdata更多資料參考中國msdn.microsoft中國/library/default.asp?url=/workshop/author/behaviors/reference/behaviors/userdata.asp sessionStorage與localStorage Web Storage實際上由兩部分組成:sessionStorage與localStorage。 sessionStorage用於本地存儲一個會話(session)中的數據,這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲。 localStorage用於持久化的本地存儲,除非主動刪除數據,否則數據是永遠不會過期的。 為什麼選擇Web Storage而不是Cookie? 與Cookie相比,Web Storage存在不少的優勢,概括為以下幾點: 一. 存儲空間更大:IE吧下每個獨立的存儲空間為一0M,其他瀏覽器實現略有不同,但都比Cookie要大很多。 二. 存儲內容不會發送到伺服器:當設置了Cookie後,Cookie的內容會隨著請求一並發送的伺服器,這對於本地存儲的數據是一種帶寬浪費。而Web Storage中的數據則僅僅是存在本地,不會與伺服器發生任何交互。 三. 更多豐富易用的介面:Web Storage提供了一套更為豐富的介面,使得數據操作更為簡便。 四. 獨立的存儲空間:每個域(包括子域)有獨立的存儲空間,各個存儲空間是完全獨立的,因此不會造成數據混亂

⑩ localstorage是什麼,它有哪些作用

局部存儲器。它是html5新增的一個本地存儲API,所謂localStorage就是一個小倉庫的意思,它有5M的大小空間,存儲在瀏覽器中,我們可以通過js來操縱localStorage。