国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端存儲 - localStorage

DandJ / 2386人閱讀

摘要：發布自的博客，歡迎大家轉載，但是要注意注明出處介紹在中，引入了兩個新的前端存儲特性這兩者非常相似，都是用來在前端保存一定量的數據，稱為前端存儲，但是這兩者仍然存在一定區別生命周期的生命周期是永久的，即使關閉頁面瀏覽器，其中的內容也不會消失，

發布自Kindem的博客，歡迎大家轉載，但是要注意注明出處
localStorage 介紹

在HTML5中，引入了兩個新的前端存儲特性：

localStorage

sessionStorage

這兩者非常相似，都是用來在前端保存一定量的數據，稱為前端存儲，但是這兩者仍然存在一定區別：

生命周期：

localStorage: localStorage的生命周期是永久的，即使關閉頁面、瀏覽器，其中的內容也不會消失，除非手動刪除localStorage中的內容

sessionStorage: sessionStorage的生命周期是一次瀏覽器窗口會話，瀏覽器窗口指的是一組同源頁面(來自于一個域名)的瀏覽器頁面集合，當這些窗口全部關閉之后，sessionStorage的內容將不會存在

存儲大小：

兩者都為5MB/域名

存儲位置：

兩者都保存在客戶端，不與服務器進行交互

存儲內容類型：

兩者都只能存儲字符串，但是可以通過類型轉換來存儲各類數據

獲取方式：

localStorage: window.localStorage

sessionStorage: sessionStorage

可見localStorage適合在前端存儲長時間使用的數據， 而sessionStorage適合存儲短期使用、一次性的數據

另外這里要提一句，sessionStorage并不是session：

sessionStorage中的‘session’是指瀏覽器窗口會話，而后者的‘session’指的是服務器會話

前者是前端存儲，與服務器無關，而后者的實現依賴于服務器

這里只介紹更加常用的localStorage的使用，而sessionStorage的使用其實也類似

localStorage的使用

localStorage作為一個在HTML5中引入的特性，在IE6/7等一些低版本的瀏覽器中是無法被支持的，所以建議在使用localStorage之前先檢查瀏覽器支持情況：

if (!window.localStorage) {
    // 當瀏覽器不支持 localStorage ...
} else {
    // 瀏覽器支持 localStorage ...
}

localStorage的使用也很簡單，在localStorage中，數據都是以鍵值對的形式存在，可以使用json對象的形式直接對localStorage中的鍵值對進行操作：

// 設置數據
localStorage.a = "hello";
localStorage.b = "zero";
// 讀取數據
console.log(localStorage.a);
console.log(localStorage.b);

就那么簡單

但是這里要注意一點，存儲在localStorage中的數據一定是以字符串形式存在的，所以當你存入/讀取其他形式的數據時，需要進行類型轉換才行：

// 存入 json 數據
localStorage.jsonTest = JSON.stringify({
    a: "hello",
    b: "zero"
});

// 讀取 json 數據
console.log(JSON.parse(localStorage.jsonTest).a);
console.log(JSON.parse(localStorage.jsonTest).b);
使用js庫來操作localStorage

有很多js庫提供了一系列簡化localStorage并且提供跨平臺操作的功能，使用它們可以更加輕易地使用localStorage，這里介紹一個js庫——store.js

store.js 的一大優點就是他將為你自動進行類型轉換，相當于你可以直接在 localStorage 中儲存諸如 json 對象等類型的數據，這些對你來說是透明的

安裝：

npm install store

API：

// 引入
let store = require("store");

// 設置數據
store.set("user", {
    name: "Kindem"
});

// 獲取數據
let obj = store.get("user");

// 刪除數據
store.remove("user");

// 刪除所有數據
store.clearAll();

// 遍歷鍵值對
store.each((value, key) => {
    // do something ...
});
參考

https://www.cnblogs.com/cencenyue/p/7604651.html

https://www.cnblogs.com/st-leslie/p/5617130.html

http://www.w3school.com.cn/html5/html_5_webstorage.asp

https://www.npmjs.com/package/store

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96000.html

相關文章

  • 前端存儲

    摘要：前端存儲簡介一種在前端保存數據的思想。為了保證前端性能，一般不會保存大量數據。在手動刪除前一直存在關閉當前頁面后被清除可存放大小與服務器通信每次都在頭部信息中。 前端存儲 簡介 一種在前端保存數據的思想。第一次在頁面中的保存數據，那么從第二次開始就可以使用了。可以使用的方法有： cookie localeStorage sessionStorage ie的userData web s...

    luckyw 評論0 收藏0

  • 前端存儲

    摘要：前端存儲簡介一種在前端保存數據的思想。為了保證前端性能，一般不會保存大量數據。在手動刪除前一直存在關閉當前頁面后被清除可存放大小與服務器通信每次都在頭部信息中。 前端存儲 簡介 一種在前端保存數據的思想。第一次在頁面中的保存數據，那么從第二次開始就可以使用了。可以使用的方法有： cookie localeStorage sessionStorage ie的userData web s...

    binaryTree 評論0 收藏0

  • [聊一聊系列]聊一聊前端存儲那些事兒

    摘要：如圖圖顧名思義，，是級別的存儲。如筆者寫的一篇淺析文章聊一聊百度移動端首頁前端速度那些事兒讀者們可以嘗試使用。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/frontenddriver 在web開發越來越復雜的今天，前端擁有的能力也越來越多。其中最重要的一項莫過于web存儲。...

    caige 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<