## 前言
也許你已經使用過cookie,session,但有可能不了解其原理以及特性,andweb存儲還有其他的方案,通過該文檔你將獲知所有的web存儲類型各自的語法以及特征。
## cookie
### 描述
* 一般情況下只有用戶的token會保存到cookie中,其他的保存到會話中即可。
* 大小限制只有4k
* 一般情況下不建議放大數據,因為這部分會隨著http交互傳接,影響性能
* 一般情況下存儲的是純文本,對象需要序列化之后才可以存儲,解析需要反序列化,其中最常見的是json的對象以及字符串的互相轉換。
* 最早作為http拓展協議的一部分,是指web瀏覽器存儲的少量數據。
### 原生方法
請參考js-js常用技術-jscookie的自定義方法,你將獲得setCookie(name, value);delCookie(name);getCookie(name)三個基本方法。
### js封裝方法
github地址:https://github.com/js-cookie/js-cookie<br>
直接引入:<script src="/path/to/js.cookie.js"></script>
基本語法:
* 創建: Cookies.set('name', 'value');
* 創建7天有效期: Cookies.set('name', 'value', { expires: 7 });;
* 創建指定路徑有效的: Cookies.set('name', 'value', { expires: 7, path: '' });
* 讀取單獨:Cookies.get('name'); // => 'value';
* 讀取所有:Cookies.get(); // => { name: 'value' };
* 刪除指定: Cookies.remove('name');// => true 錯誤的返回false
### jq封裝方法
github地址:https://github.com/carhartl/jquery-cookie<br>
直接引入:<script src="/path/to/jquery.cookie.js"></script>
基本語法:
* 創建: $.cookie('name', 'value');
* 創建7天有效期:$.cookie('name', 'value', { expires: 7 });
* 創建指定路徑有效的:$.cookie('name', 'value', { expires: 7, path: '/' });
* 讀取單獨:$.cookie('name'); // => "value"
* 讀取所有:$.cookie(); // => { "name": "value" }
* 刪除指定:$.removeCookie('name'); // => true 錯誤的返回false
## webStroage
* 描述
在window對象上定義了兩個屬性,分別是localStroage,以及sessionStroage,這兩個屬性都代表同一個Stroage對象,一個持久化的關聯數組。
* 語法(localStroage,以及sessionStroage語法公用的)
~~~
var name=localStroage.username;
name=localStroage["username"];//等同于數組的表示法
if(!name){
name=promt("what is your name");
localStroage.username=name;
}
//迭代讀取存儲
for( var name in localStroage){
var value=localStroage[name];
}
~~~
* 存儲api
~~~
setItem(name,value)
getItem(name)
removeItem(name);
clear() //清除所有
~~~
## localStroage
* 描述
localStorage用于持久化的本地存儲,除非主動刪除數據,否則數據是永遠不會過期的。
* 作用域
作用域限定在文檔源,文檔源通過協議,主機名以及端口確定的;也受瀏覽器廠商的限制
* 有效期
永久性的,除非應用特意刪除,否則一直保存在用戶的電腦上,永不過期
## sessionStroage
* 描述
sessionStorage用于本地存儲一個會話(session)中的數據,這些數據只有在同一個會話中的頁面才能訪問并且當會話結束后數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲
* 作用域
與localStroage基本相同,并且不同標簽頁的數據也是不可公用的
* 有效期
頂層窗口的標簽頁,關閉就失效,如果一個頁面有兩個并列的iframe,那么這兩個是可以互相通訊的。
## 對比
Web Storage的概念和cookie相似,區別是它是為了更大容量存儲設計的。Cookie的大小是受限的,并且每次你請求一個新的頁面的時候Cookie都會被發送過去,這樣無形中浪費了帶寬,另外cookie還需要指定作用域,不可以跨域調用。
除此之外,Web Storage擁有setItem,getItem,removeItem,clear等方法,不像cookie需要前端開發者自己封裝setCookie,getCookie。但是Cookie也是不可以或缺的:Cookie的作用是與服務器進行交互,作為HTTP規范的一部分而存在 ,而Web Storage僅僅是為了在本地“存儲”數據而生。
## 其他
### 用戶緩存的更新
### 離線的web應用
- 前端入門
- 前端入職須知
- 前端自我定位
- pc與手機頁面差別
- 前端書單
- 前端種子計劃
- 前端技術棧
- ps
- ps入門階段
- html
- html入門
- html代碼規范
- meta
- table
- iframe
- a標簽詳解
- image
- html代碼審查工具
- h5專題
- h5入門
- h5新增屬性
- canvas畫布教程
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- css
- css入門必學
- css代碼規范
- 項目字體規范
- css基本位置布局
- css常見樣式命名規則
- css代碼優化建議
- css常用樣式名
- css選擇器攻略
- css盒子模型的理解
- css屬性繼承與默認值
- css代碼審查工具
- css中常見的知識盲區
- css3新特性淺談
- css新特性了解
- border-radius
- background
- transform
- animation
- white-space
- css常用技術
- 文本兩端對齊
- css之浮動解決方案
- css優化建議
- 文本超出省略
- img-sprites
- rem布局教程
- 水平居中&垂直居中
- 固寬&變寬布局
- 寬高固定比例的盒模型
- 樣式預處理語言
- less教程
- sass教程
- postcss教程
- js
- javascript入門
- js代碼規范
- js基礎拓展
- js代碼審查工具
- js性能優化
- js基本語句
- 基本運算
- 基本語句語法
- js對象
- es6入門
- obj
- Array
- Date
- String
- Boolean
- Number
- Json
- RegExp
- Math
- function
- jquery入門
- jq核心思想
- jq基本語法
- jq插件庫匯總
- js常用技術
- break&continue區別
- js對日期轉換
- js控制運動-move.js
- 原生js-cookie語法
- ajax請求后回調
- 表單數據序列化
- zepto
- zepto入門
- 百度touchjs
- js編程
- 插件庫
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 交互組件
- layerjs
- java
- java入門
- java基本語句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- maven教程
- mySql教程
- flex教程
- flex入門
- git教程
- git入門
- git分支
- git-tag管理
- git注意事項
- git-torise入門
- ide-git插件使用
- web
- web兼容
- web兼容思想
- pc端兼容適配文檔
- pc端兼容bug匯總
- ie兼容bug匯總
- 手機兼容bug匯總
- web安全
- jeecms
- web存儲
- app/h5組件
- 安卓教程
- ios教程
- 前端教程
- rubikx的教程
- 其他
- artTemplate
- tmod使用
- 跨域問題
- markdown教程
- 常用工具
- postman-api調試
- web常識
- 瀏覽器ua統計
- ui框架
- easyui
- bootstrap
- 入門推薦
- weui
- sui-pc
- sui-mobile
- layerUi