1. 首頁 > 生活 > >

js獲取文件的絕對路徑 js通過路徑讀取本地文件

小知識



文章插圖
js獲取文件的絕對路徑 js通過路徑讀取本地文件

文章插圖

一、方式
javaScript本地緩存的方法我們主要講述以下四種：
cookiesessionStoragelocalStorageindexedDBcookie
Cookie，類型為「小型文本文件」，指某些網站為了辨別用戶身份而儲存在用戶本地終端上的數據 。是為了解決 HTTP無狀態導致的問題
作為一段一般不超過 4KB 的小型文本數據，它由一個名稱（Name）、一個值（Value）和其它幾個用于控制 cookie有效期、安全性、使用范圍的可選屬性組成
但是cookie在每次請求中都會被發送，如果不使用 HTTPS并對其加密，其保存的信息很容易被竊取，導致安全風險 。舉個例子，在一些使用 cookie保持登錄態的網站上，如果 cookie被竊取，他人很容易利用你的 cookie來假扮成你登錄網站
關于cookie常用的屬性如下：
Expires 用于設置 Cookie 的過期時間
Expires=Wed, 21 Oct 2015 07:28:00 GMTMax-Age 用于設置在 Cookie 失效之前需要經過的秒數（優先級比Expires高）
Max-Age=604800Domain指定了 Cookie 可以送達的主機名Path指定了一個 URL路徑，這個路徑必須出現在要請求的資源的路徑中才可以發送 Cookie 首部
Path=/docs# /docs/Web/ 下的資源會帶 Cookie 首部標記為 Secure的 Cookie只應通過被HTTPS協議加密過的請求發送給服務端
通過上述，我們可以看到cookie又開始的作用并不是為了緩存而設計出來，只是借用了cookie的特性實現緩存
關于cookie的使用如下：
document.cookie = '名字=值';關于cookie的修改，首先要確定domain和path屬性都是相同的才可以，其中有一個不同得時候都會創建出一個新的cookie
Set-Cookie:name=aa; domain=aa.net; path=/# 服務端設置document.cookie =name=bb; domain=aa.net; path=/# 客戶端設置最后cookie的刪除，最常用的方法就是給cookie設置一個過期的事件，這樣cookie過期后會被瀏覽器刪除
localStorage
HTML5新方法，IE8及以上瀏覽器都兼容
特點生命周期：持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的存儲的信息在同一域中是共享的當本頁操作（新增、修改、刪除）了localStorage的時候，本頁面不會觸發storage事件,但是別的頁面會觸發storage事件 。大?。?M（跟瀏覽器廠商有關系）localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡受同源策略的限制
下面再看看關于localStorage的使用
設置
localStorage.setItem('username','cfangxu');獲取
localStorage.getItem('username')獲取鍵名
localStorage.key(0) //獲取第一個鍵名刪除
localStorage.removeItem('username')一次性清除所有存儲
localStorage.clear()localStorage 也不是完美的，它有兩個缺點：
無法像Cookie一樣設置過期時間只能存入字符串，無法直接存入對象
localStorage.setItem('key', {name: 'value'});console.log(localStorage.getItem('key')); // '[object, Object]'sessionStorage
sessionStorage和 localStorage使用方法基本一致，唯一不同的是生命周期，一旦頁面（會話）關閉，sessionStorage 將會刪除數據
擴展的前端存儲方式
indexedDB是一種低級API，用于客戶端存儲大量結構化數據(包括, 文件/ blobs) 。該API使用索引來實現對該數據的高性能搜索
雖然 Web Storage對于存儲較少量的數據很有用，但對于存儲更大量的結構化數據來說，這種方法不太有用 。IndexedDB提供了一個解決方案
優點：儲存量理論上沒有上限所有操作都是異步的，相比 LocalStorage 同步操作性能更高，尤其是數據量較大時原生支持儲存JS的對象是個正經的數據庫，意味著數據庫能干的事它都能干缺點：操作非常繁瑣本身有一定門檻
關于indexedDB的使用基本使用步驟如下：
打開數據庫并且開始一個事務創建一個 object store構建一個請求來執行一些數據庫操作，像增加或提取數據等 。通過監聽正確類型的 DOM 事件已等待操作完成 。在操作結果上進行一些操作（可以在 request對象中找到）
關于使用indexdb的使用會比較繁瑣，大家可以通過使用Godb.js庫進行緩存，最大化地降低操作難度
二、區別
關于cookie、sessionStorage、localStorage三者的區別主要如下：
存儲大小：cookie數據大小不能超過4k，sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大有效時間：localStorage存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據；sessionStorage數據在當前瀏覽器窗口關閉后自動刪除；cookie設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉數據與服務器之間的交互方式，cookie的數據會自動地傳遞到服務器，服務器端也可以寫cookie到客戶端；sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存三、應用場景
在了解了上述的前端的緩存方式后，我們可以看看針對不對場景的使用選擇：
【js獲取文件的絕對路徑 js通過路徑讀取本地文件】標記用戶與跟蹤用戶行為的情況，推薦使用cookie適合長期保存在本地的數據（令牌），推薦使用localStorage敏感賬號一次性登錄，推薦使用sessionStorage存儲大量數據的情況、在線文檔（附文本編輯器）保存編輯歷史的情況，推薦使用indexedDB