1. 程式人生 > >js——本地存儲

js——本地存儲

讀取 script img asc expires div 分享圖片 ctype val

1. cookie 容量小:4k,在同源的http請求時攜帶傳輸,占用帶寬,有日期限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript">
        //
寫cookie $.cookie(‘mycookie‘,‘ok‘,{expires:7,path:‘/‘}); //讀cookie var val = $.cookie(‘mycookie‘); alert(val) </script> </head> <body> </body> </html>

2. localStorage 容量更大:5M,不會再請求時攜帶傳遞,在所有同源窗口中共享,數據一直有效,除非人為刪除,可作為長期數據。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        <!--寫入數據-->
        localStorage.setItem(
‘kid‘,‘beautiful!‘); //讀取數據 alert(localStorage.kid); </script> </head> <body> </body> </html>

3. sessionStorage 容量>=5M,不會在請求時攜帶傳遞,在同源的當前窗口關閉前有效。

技術分享圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        <!--寫入數據-->
        sessionStorage.setItem(
‘pwd‘,‘111‘); //讀取數據 alert(sessionStorage.pwd); </script> </head> <body> </body> </html>

  localStorage 和 sessionStorage 合稱Web Storage,支持事件通知機制,可以將數據更新的通知監聽者,Web Storage的api接口使用更方便。

  iPhone的無痕瀏覽不支持Web Storage,只能用cookie

js——本地存儲