`

localStorage请使用getItem 和setITem

阅读更多

最近看别人的代码,发现他们在从localStorage里面的时候喜欢用dot来操作,而不是get setItem,记得以前说过这个事。下面再说一次吧。

用dot方式来操作( 每次以'hello'=>'world','zhangsan'=>'lisi'来做为例子

设值 
localStorage.hello = 'world';
localStorage.zhangsan = 'lisi';
取值:
var value_of_hello_in_localStorage = localStorage.hello;
var value_of_zhangsan_in_localStorage = localStorage.zhangsan

 用getItem setItem来操作

设值:
localStorage.setItem("hello", "world");
localStorage.setItem("zhangsan", "lisi");
取值:
localStorage.getItem("hello");
localStorage.getItem("zhangsan");

 这两种方法的效率我不清楚,但是为什么推荐使用get setItem呢?

1.容易控制,便于动态绑定,尤其在函数抽离和重构中。比如我要存一个复杂类型,每次存的时候都需要做JSON.stringify(object_a),所以我把它抽成函数

//用dot方式来实现设值:
function storage_object(key,object_value)
{
    localStorage.key = JSON.stringify(object_value);
}
//用getItem方式来实现:
function storage_object (key,object_value)
{
  localStorage.setItem(key,JSON.stringify(object_value));
}

 

 这时候就会明显的发现用dot的方式是很不合适的。因为他不能实现动态的绑定key。

2.感觉用getItem更美观,容易读懂。这个是个人意见。我记得我看过一段代码,作用大概是实现计数吧:

locatStorage.count++ 

 我看见他的时候, 当时就蒙圈了。确实挺简单的,但是不容易懂啊。这是在考验我啊。

大概就是这样。

1
2
分享到:
评论

相关推荐

    vue 界面刷新数据被清除 localStorage的使用详解

    window.localStorage.setItem('key', value); //储存文件 window.localStorage.getItem('key'); //读取文件 window.localStorage.removeItem('key'); //清除文件 vue中使用方法: 1、新建一个store.js文件 ...

    html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例

    webstrange又分为:localstorage,sessionstorage和本地数据库。 接下来我就来一一介绍: 1、localstorage localstorage 的使用比较简单,方法有: 复制代码代码如下:localStorage.setItem(key,value);//保存数据...

    html5中localStorage本地存储的简单使用

    2、localStorage.setItem(color,red); //第二种设置存储本地数据的方法 3、localStorage.removeItem(name); //删除本地存储数据 4、localStorage.name //获取本地数据  localStorage.getItem(set) //另一种获取...

    HTML5 LocalStorage 本地存储刷新值还在

    localStorage.setItem(“key”,“value”)//存储 localStorage.getItem(key)//按key进行取值 localStorage.valueOf( )//获取全部值 localStorage.removeItem(key)//删除单个值,注意引号 localStorage.clear()/...

    mobx-localstorage:使用MobX的声明式React式localStorage

    使用MobX的声明式React式localStorage 安装 yarn add mobx-localstorage npm i -S mobx-localstorage 特征 比本地吸气剂更高的性能 与外部变更同步 支持本机API和MobX API 用法 与本地相同,但MobX可以观察到 import...

    electron-localStorage:在eletron主线程也能使用的localStorage

    electron-localStorage在eletron主线程也能使用的localStorageelectron主进程中是不能获取到浏览器的window对象的,所以我们...3.使用3.1完美支持所有localStorage的所有api:存储数据storage.setItem(`myCat`, `Tom`);

    iframe-localstorage

    iframe.js 文件覆盖 localtStorage setItem 、 getItem和removeItem方法,并提供延迟接口等待结果。 代码示例 在嵌套页面中包含 iframe.js 后,您可以将 localStorage 方法与经典接口一起使用。 localStorage . ...

    适用于浏览器和Node.js的通用LocalStorage。-JavaScript开发

    安装使用npm安装:npm install localstorage-ponyfill用法自动(浏览器或Node.js)自动localstorage-ponyfill用于浏览器和Node.js的通用LocalStorage ponyfill库。 安装使用npm安装:npm install localstorage-...

    LocalStorage记住用户和密码功能

     然而LocalStorage,你存储的时候有localStorage.setItem(),你读取的时候有localStorage.getItem(),你想要删除的时候有localStorage.removeItem().此外在存储时,它们事以键值对的形式存储的.所以更易于使用.并且...

    JS18-LocalStorage:从LocalStorage获取数据。 从LocalStorage删除和更新项目

    从LocalStorage删除和更新项目 将项目添加到LocalStorage 当我进入亚马逊时,我可以将商品保存在购物车中,如果我两天后回去, 仍然会在购物车中,为此会使用LocalStorage LocalStorage API属于全局窗口 ...

    mock-dom-storage:NodeJS的简单模拟dom存储

    localStorage . setItem ( 'thing' , 'value' ) localStorage . getItem ( 'thing' ) // => 'value' localStorage . getItem ( 'unknown' ) // => null localStorage . length // => 1 localStorage . setItem ( '...

    JS 中LocalStorage和SessionStorage的使用

    最近因为项目上需要使用到客户端存储,所以稍微研究了一下,以下说说自己的理解和使用经验 1.调用方法相同 各自都包含以下几种操作: //根据key获取对应的值; window.sessionStorage.getItem(key); window....

    JSStorageSnippet:简单JavaScript localstorage辅助函数

    使用window.localstorage.setItem()和window.localstorage.getItem()处理localstorage。 使用typeof来检测给定值是否为对象。用法storage ( "myKey" , { key1 : "MyValue_1" , key2 : "MyValue_2" } ) ; // true if...

    nsstorage:Web 存储 API 的最小命名空间(localStorage 和 sessionStorage)

    NSStorage 是一个最小的模块,它为 Web 存储 API(localStorage 和 sessionStorage)提供命名空间。 这有助于防止您的 web 应用程序的不同部分覆盖并可能破坏彼此的数据。 ##Usage var fooStorage = NSStorage....

    object-localstorage:能够使用本地存储中的对象字段进行设置

    允许对本地存储中的对象字段使用setitems 入门 setItem: /** * @param { string } field "object.key" */ objectStorage . setItem ( field : string , value : any ) ; // eg: objectStorage . setItem ( '...

    LocalStoreHelper.js

    localStorage.setItem(name, value); } else { LocalStoreHelper.CookieHelp.SetCookie(name, value, 30); } }, GetItem: function (name) { if (window.localStorage) { return localStorage.getItem...

    persistence:围绕localStoragesessionStorage的作用域和高性能包装器

    支持类似于Web存储API的API( getItem , setItem ),带有附加的get和set别名,但在特定名称的范围内。 您可以在范围内使用逻辑键和短/相似键。 此外,您可以存储对象值。 // PageOne.js import Persistence fr

    asyncStorage:localStorage API 的异步版本,由一个 IndexedDB 数据库支持

    您可以从以下位置获取原始版本:用法要存储值,请使用 setItem: asyncStorage.setItem('key', 'value'); 如果您想确认该值已存储,请将回调函数作为第三个参数传递: asyncStorage.setItem('key', 'newValue', ...

    vue.js todolist实现代码

    return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]') }, save(items){ window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items)); } } App.vue代码 <template>

    quota-storage:带配额的 Web 存储

    配额以字符定义,键和值都用于计算。 可以与模块一起使用以创建具有单独配额的命名空间存储实例。 ##Usage var quotaStorage = QuotaStorage.quotaStorage(10, localStorage); quotaStorage.setItem('key', 'val');...

Global site tag (gtag.js) - Google Analytics