js中cookie、sessionStorage、localStorage

時間 2019-11-13

標籤 cookie sessionstorage localstorage 欄目 JavaScript 简体版

原文原文鏈接

1、cookiejavascript

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <input type="text" name="username" id="username" value="">
 9         <input type="password" name="password" id="password" value="">
10         <button type="button" name="button" id="btn">刪除cookie</button>
11         <script type="text/javascript">
12             // 一、設置、獲取
13             var d = new Date();
14             d.setHours(d.getHours() + 1);//1小時後過時
15             // path=/ 此時的/表明的是網站中全部的目錄均可以訪問這個cookie
16             document.cookie='username=zhangsan;expires='+d.toUTCString()+";path=/";//設置cookie
17             document.cookie;//獲取全部的cookie
18             console.log(document.cookie)
19 
20             // 2.設置、獲取、刪除cookie
21             // setCookie('password','123456',0.5*3600*1000)//30分鐘後失效
22             // setCookie('username','zhangsan',0.5*3600*1000)//30分鐘後失效
23             var btnObj = document.getElementById('btn')
24             btnObj.onclick = function(){
25                 delCookie('username');
26                 delCookie('password');
27             }
28             function setCookie(name,value,expires){
29                 //計算有效期
30                 var d = new Date();
31                 //設置有效期
32                 d.setTime(d.getTime()+expires);
33                 //設置cookie
34                 document.cookie = name +'='+value+';expires='+d.toUTCString();
35             }
36             function getCookie(name) {
37                 //獲取cookie
38                 var cookieStr = document.cookie;
39                 //根據；拆分
40                 var cookieArr = cookieStr.split(';');
41                 //獲取對應的cookie值
42                 name += '=';//獲取的cookie值都是後面有=
43                 var result = '';
44                 for(var i=0;i<cookieArr.length;i++) {
45                     //沒一個cookie值得前面都有一個空格，將空格刪除，再去查找對應的name值
46                     var tmp = cookieArr[i].trim();
47                     if(tmp.indexOf(name) == 0) {
48                         //若是查找成功，則直接返回
49                         result = tmp.slice(name.length);
50                         break;
51                     }
52                 }
53                 //返回結果
54                 return result;
55             }
56             function delCookie(name) {
57                 var d = new Date();
58                 d.setTime(d.getTime()-1000);
59                 document.cookie = name+'=;expires='+d.toUTCString();
60             }
61         </script>
62     </body>
63 </html>

2、sessionStoragehtml

【html5

　html5新增的會話存儲對象；java

生命週期：關閉窗口或標籤頁以後將會刪除這些數據瀏覽器

　存儲上限限制：不一樣的瀏覽器存儲的上限也不同，但大多數瀏覽器把上限限制在5MB如下。
】cookie

使用方法：session

 1 string sessionStorage.getItem(string key) ：返回鍵名(key)對應的值(value)。若沒有返回null。
 2 
 3 void sessionStorage.setItem(string key, string value) ：該方法接受一個鍵名(key)和值(value)做爲參數，將鍵值對添加到存儲中；若是鍵名存在，則更新其對應的值。
 4 
 5 void sessionStorage.removeItem(string key) ：將指定的鍵名(key)從 sessionStorage 對象中移除。
 6 
 7 void sessionStorage.clear() ：清除 sessionStorage 對象全部的項。
 8 
11 
12 sessionStorage.setItem('username','admin') //存儲數據
13 sessionStorage.getItem('username')//獲取
14 sessionStorage.clear();//清楚全部
15 sessionStorage.removeItem('username')//清楚指定
16 
17 
18 也能夠存儲JSON對象【JSON.stringify(obj)和JSON.parse(stry)】
19 eg:
20 var obg = {
21 　　name:'tom',
22 　　age:22
23 };
24 //存儲值：將對象轉換爲Json字符串
25 sessionStorage.setItem('user',JSON.stringify(obj));
26 //取值時：把獲取到的Json字符串轉換回對象
27 var userJsonStr = sessionStorage.getItem('user');
28 userObj = JSON.parse(userJsonStr);
29 console.log(userObj.name);//tom

相關標籤/搜索

cookie&sessionstorage&localstorage

localstorage&sessionstorage

sessionstorage

cookie&session&localstorage

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。