有你在真好 的个人博客
html5之Localstorage本地存储详解
阅读:2230 添加日期:2021/3/27 23:30:59 原文链接:https://www.toutiao.com/item/5239887837/

html5之Localstorage本地存储详解

Localstorage本地存储基本用法

如何创建和访问 localStorage

<script type="text/javascript">localStorage.lastname="Smith";document.write(localStorage.lastname);</script>

上面就创建了一个localStorage。

我们再来做一个刷新页面,增加访问次数的功能!很简单,代码如下:

<script type="text/javascript">if (localStorage.pagecount)

 {

 localStorage.pagecount=Number(localStorage.pagecount) +1;

 }else

 {

 localStorage.pagecount=1;

 }document.write("Visits "+ localStorage.pagecount + " time(s).");</script>

上面是用点的方式进行操作,localStorage还有存储API,具体如下:

  • 调用setItem()方法,将对应的名字和值传递出去,可以实现数据存储

  • 调用getItem()方法,将名字传递出去,可以获取对应的值

  • 调用removeItem()方法,名称作为参数,可以删除对应的数据

  • 调用clear()方法,可以删除所有存储的数据

  • 使用length属性以及key()方法,传入0~length-1的数字,可以枚举所有存储数据的名字

用法如下:

localStorage.setItem("name", "haorooms");    // 以"name"为名字存储一个字符串localStorage.getItem("name");            // 获取"name"的值// 枚举所有存储的名字/值对for(var i=0; i<localStorage.length; i++){        // length表示所有的名值对总数

   var name = localStorage.key(i);            // 获取第i对的名字

   var value = localStorage.getItem(name);        // 获取该对的值}localStorage.removeItem("name");        // 删除"name"项localAStorage.clear();                // 全部删除

sessionStorage和Localstorage区别

sessionStorage用法和Localstorage用法一样,区别就是,sessionStorage是会话存储,关闭浏览器,存储内容就会被清除。

低版本浏览器存储兼容方案

IE User Data

微软在IE5及之后的IE浏览器中实现了它专属的客户端存储机制——“userData”。

userData可以实现一定量的字符串数据存储,对于IE8以前的IE浏览器中,可以将其用作是Web存储的替代方案。

iLocalStorage插件

由于IE8以下浏览器的本地存储API不一样,所以就写了个插件兼容各大浏览器存储。提供的方法及用法如下:

getItem: 获取属性setItem: 设置属性removeItem: 删除属性iLocalStorage.setItem('key', 'value');console.log(iLocalStorage.getItem('key'));iLocalStorage.removeItem('key');

插件代码

/**

* LocalStorage 本地存储兼容函数

* getItem: 获取属性

* setItem: 设置属性

* removeItem: 删除属性

*

*

* @example

*

   iLocalStorage.setItem('key', 'value');

   console.log(iLocalStorage.getItem('key'));

   iLocalStorage.removeItem('key');

*

*/(function(window, document){

   // 1. IE7下的UserData对象

   var UserData = {

       userData: null,

       name: location.href,

       init: function(){

           // IE7下的初始化

           if(!UserData.userData){

               try{

                   UserData.userData = document.createElement("INPUT");

                   UserData.userData.type = "hidden";

                   UserData.userData.style.display = "none";

                   UserData.userData.addBehavior("#default#userData");

                   document.body.appendChild(UserData.userData);

                   var expires = new Date();

                   expires.setDate(expires.getDate() + 365);

                   UserData.userData.expires = expires.toUTCString();

               } catch(e){

                   return false;

               }

           }

           return true;

       },

       setItem: function(key, value){

           if(UserData.init()){

               UserData.userData.load(UserData.name);

               UserData.userData.setAttribute(key, value);

               UserData.userData.save(UserData.name);

           }

       },

       getItem: function(key){

           if(UserData.init()){

               UserData.userData.load(UserData.name);

               return UserData.userData.getAttribute(key);

           }

       },

       removeItem: function(key){

           if(UserData.init()){

               UserData.userData.load(UserData.name);

               UserData.userData.removeAttribute(key);

               UserData.userData.save(UserData.name);

           }

       }

   };

   // 2. 兼容只支持globalStorage的浏览器

   // 使用: var storage = getLocalStorage();

   function getLocalStorage(){

       if(typeof localStorage == "object"){

           return localStorage;

       } else if(typeof globalStorage == "object"){

           return globalStorage[location.href];

       } else if(typeof userData == "object"){

           return globalStorage[location.href];

       } else{

           throw new Error("不支持本地存储");

       }

   }

   var storage = getLocalStorage();

   function iLocalStorage(){

   }

   // 高级浏览器的LocalStorage对象

   iLocalStorage.prototype = {

       setItem: function(key, value){

           if(!window.localStorage){

               UserData.setItem(key, value);

           }else{

               storage.setItem(key, value);

           }

       },

       getItem: function(key){

           if(!window.localStorage){

               return UserData.getItem(key);

           }else{

               return storage.getItem(key);

           }

       },

       removeItem: function(key){

           if(!window.localStorage){

               UserData.removeItem(key);

           }else{

               storage.removeItem(key);

           }

       }

   }

   if (typeof module == 'object') {

       module.exports = new iLocalStorage();

   }else {

       window.iLocalStorage = new iLocalStorage();

   }})(window, document);

其他插件

localForage:https://github.com/mozilla/localForage

store.js:https://github.com/marcuswestin/store.js

------------------

切图网(qietu.com)是一家专门从事html5前端开发的服务机构,长期致力于提供高品质的psd转html5、响应式切图、webapp切图,h5切图等web前端开发服务。

专注web前端开发技术,关注用户体验,加我们公众微信账号:qietuwang(长按复制)

ICP备案号:苏ICP备14035786号-1 苏公网安备 32050502001014号