web 本地儲存 (localStorage、sessionStorage),很好用,很強大!!!
web 本地儲存 (localStorage、sessionStorage)
說明
對瀏覽器來說,使用 Web Storage 儲存鍵值對比儲存 Cookie 方式更直觀,而且容量更大,它包含兩種:localStorage 和 sessionStorage
- sessionStorage(臨時儲存) :為每一個數據源維持一個儲存區域,在瀏覽器開啟期間存在,包括頁面重新載入
- localStorage(長期儲存) :與 sessionStorage 一樣,但是瀏覽器關閉後,資料依然會一直存在
API
sessionStorage 和 localStorage 的用法基本一致,引用型別的值要轉換成JSON
- 儲存資料到本地
const info = {
name: 'Lee',
age: 20,
id: '001'
};
sessionStorage.setItem('key', JSON.stringify(info));
localStorage.setItem('key', JSON.stringify(info));
- 從本地儲存獲取資料
var data1 = JSON.parse(sessionStorage.getItem('key'));
var data2 = JSON .parse(localStorage.getItem('key'));
- 本地儲存中刪除某個儲存的資料(移除某一個)
sessionStorage.removeItem('key');
localStorage.removeItem('key');
- 刪除所有儲存的資料(清空所有)
sessionStorage.clear();
localStorage.clear();
- 監聽本地儲存的變化
Storage 發生變化(增加、更新、刪除)時的 觸發,同一個頁面發生的改變不會觸發,只會監聽同一域名下其他頁面改變 Storage
window. addEventListener('storage', function (e) {
console.log('key', e.key);
console.log('oldValue', e.oldValue);
console.log('newValue', e.newValue);
console.log('url', e.url);
})
一個簡單常用的set()和get()方法(加入了時間過期)
//封裝過期控制程式碼
function set(key,value){
var curTime = new Date().getTime();
localStorage.setItem(key,JSON.stringify({data:value,time:curTime}));
}
function get(key,exp){
var data = localStorage.getItem(key);
if(data == null){
return null;
}
var dataObj = JSON.parse(data);
if (new Date().getTime() - dataObj.time>exp) {
localStorage.removeItem(key);
//console.log('資訊已過期');
return null;
//alert("資訊已過期")
}else{
//console.log("data="+dataObj.data);
//console.log(JSON.parse(dataObj.data));
var dataObjDatatoJson = dataObj.data;
return dataObjDatatoJson;
}
}
瀏覽器檢視方法
進入開發者工具
選擇 Application
在左側 Storage 下 檢視 Local Storage 和 Session Storage
相關推薦
web本地儲存(localStorage、sessionStorage)
web 本地儲存 (localStorage、sessionStorage) 說明 對瀏覽器來說,使用 Web Storage 儲存鍵值對比儲存 Cookie 方式更直觀,而且容量更大,它
web 本地儲存 (localStorage、sessionStorage),很好用,很強大!!!
web 本地儲存 (localStorage、sessionStorage) 說明 對瀏覽器來說,使用 Web Storage 儲存鍵值對比儲存 Cookie 方式更直觀,而且容量更大,它包含
vue-x儲存與本地儲存(localstorage、sessionstorage)
sessionstorage 也稱會話快取,當用戶關閉瀏覽器視窗後,資料就會被刪除; localstorage 儲存的資料沒有時間限制,只要不刪除,都會存在 vue-x 一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態,並以
web本地存儲(localStorage、sessionStorage)
dex import bsp fill tle 類型 工具 臨時 而且 web 本地存儲 (localStorage、sessionStorage) 說明 對瀏覽器來說,使用 Web Storage 存儲鍵值對比存儲 Cookie 方式更直觀,而且容量更大,它包含兩種:l
H5瀏覽器儲存(localStorage和sessionStorage)
1.localStorage是持久儲存,sessionStorage是關閉視窗後失效 2.只能儲存String型別字串 3.l
localStorage - 本地儲存(新增、讀取、修改、刪除、JSON格式儲存)
這個是我對localStorage的自己的理解~ 什麼是localStorage? html5新增的一個本地儲存的API,由於cookie的儲存空間過小,localStroage一般瀏覽器支援儲存5M,用於儲存客戶端的一些臨時資訊 只能儲存字串型別,不會被爬蟲抓到 localStor
本地儲存(localStorage,sessionStorage),cookies(歷史記錄儲存)
特性 設定、讀取方便 容量較大,sessionStorage約5M、localStorage約20M 只能儲存字串,可以將物件JSON.stringify() 編碼後儲存 window.sessionStorage 生命
web存儲機制(localStorage和sessionStorage)
rst log asc scribe local set -s move java web存儲包括兩種:sessionStorage 和 localStorage(都是限定在文檔源級別,非同源文檔間無法共享) 1.sessionStorage 數據放在服務器上(IE不支持)
本地儲存(新增、讀取、修改、刪除、JSON格式儲存)
什麼是localStorage? html5新增的一個本地儲存的API,由於cookie的儲存空間過小,localStroage一般瀏覽器支援儲存5M,用於儲存客戶端的一些臨時資訊 只能儲存字串型別,不會被爬蟲抓到 localStorage的儲存生命週期是永久的,除非使
淺談瀏覽器存儲(cookie、localStorage、sessionStorage)
sub this code 開發者 緩存 ora move 傳參 作用 今天我們從前端的角度了解一下瀏覽器存儲,我們常見且常用的存儲方式主要由兩種:cookie、webStorage(localStorage和sessionStorage)。下面我們來一一認識它們。
vuex存儲和本地存儲(localstorage、sessionstorage)的區別
方法 之間 做到 get 無法 傳值 href 狀態 來源 1. sessionStorage sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後,數據會被刪除。 用法: 儲存: 1. 點(.)運算符
in Fedora 29,WPS Office for Linux,WPS(ET、WPP) 只能輸入英文,不能輸入中文
編輯下面三個檔案 # gedit /usr/bin/wps /usr/bin/wpp /usr/bin/et 新增如下export開頭的行 #!/bin/bash#export XMODIFIERS=
雙系統(ubuntu、windows), 刪除 ubuntu 分割槽,進不去 windows 解決辦法
最近人品有點差,接二連三從筆記本螢幕、開發板、再到桌上型電腦硬體壞了,再到自己安裝不小心,安裝失敗了ubuntu(沒有選擇分割槽,讓系統自己選擇)。然後自己直接把ubuntu分割槽刪掉了,這下問題就來
本地儲存(一)—— Cookie、SessionStorage和LocalStorage詳解
目錄 1. Cookie 2. Web Storage 2.1 Session Storage 2.2 Local Storage 2.3 Web Storage 的瀏覽器支援情況 3. Cookie、SessionStorage和LocalStorage的對比
JavaScript中離線應用和客戶端存儲(cookies、sessionStorage、localStorage)
getc 帶寬 元素 locals back cookie 代碼 無形中 空間名 一、離線應用 所謂離線web應用,就是在設備不能上網的情況下仍然可以運行的應用。 開發離線web應用需要幾個步驟:首先,確保應用知道設備是否能上網,以便下一步執行正確的操作;然後,應用還必須能
【Vue】vuex儲存和本地儲存(localstorage、sessionstorage)的區別
1. sessionStorage sessionStorage 方法針對一個 session 進行資料儲存。當用戶關閉瀏覽器視窗後,資料會被刪除。 用法: 儲存: 1. 點(.)運算子
html5新特性與用法大全瞭解一下例如canvas、svg、地理定位(移動、pc)、拖放API(僅pc端)、web Socket、儲存等等!
有好多小夥伴私聊我問我html5新特性 和用法,下面我給大傢俱體介紹一下html5都新加了哪些新特性 1)新的語義標籤 footer header 等等2)增強型表單 表單2.03)音訊和視訊4)canvas 繪圖5) SVG繪圖6)地理定位7) 拖放API8)web worker 用來執行耗時任務9)web
HTML5 本地儲存 localStorage、sessionStorage 的遍歷、儲存大小限制處理
HTML5 的本地儲存 API 中的 localStorage 與 sessionStorage 在使用方法上是相同的,區別在於 sessionStorage 在關閉頁面後即被清空,而 localStorage 則會一直儲存。我們這裡以 localStorage 為例,簡
HTML5本地儲存localStorage、sessionStorage基本用法、遍歷操作、異常處理等
HTML5 的本地儲存 API 中的 localStorage 與 sessionStorage 在使用方法上是相同的,區別在於 sessionStorage 在關閉頁面後即被清空,而 localStorage 則會一直儲存。我們這裡以 localStorage 為例,簡
VS2013 MVC Web項目使用內置的IISExpress支持局域網內部機器(手機、PC)訪問、調試
toc server user 機器 項目 這一 運行 vs2013 情況下 VS2013內置了IISExpress。做asp.net MVC的web項目開發時,Ctrl+F5和F5啟動項目運行(後者是調試模式)的同時都會打開IISExpress,事實上本機對該web項目走