localStorage用法小总结 - 简书
localStorage用法小总结
记得前端大神winter说过：要建立起自己的知识体系，第一步：寻找线索(找准确、全面的)；第二步，建立联系；第三步，是分类(用思维导图)，第四步，是追本溯源(找到最初的那个它～)
今天，怀着崇拜大神的心情，来学习下 localStorage的基本用法。用到的学习机是chrome浏览器，毕竟大厂权威性还是可以的。
我首先在开发者工具的Console中，输入了
localStorage.
然后就弹出了一些列宿主（浏览器）提供的localStorage自带的方法，摘录了一些常用的API如下表所示：
清空localStorage上存储的数据
hasOwnProperty
检查localStorage上是否保存了变量x，需要传入x
读取第i个数据的名字或称为键值(从0开始计数)
localStorage存储变量的个数
propertyIsEnumerable
用来检测属性是否属于某个对象的
removeItem
删除某个具体变量
toLocaleString
将（数组）转为本地字符串
获取所有存储的数据
清空localStorage
localStorage.clear()
// undefined
localStorage
// Storage {length: 0}
localStorage.setItem("name","caibin") //存储名字为name值为caibin的变量
localStorage.name = "caibin"; // 等价于上面的命令
localStorage // Storage {name: "caibin", length: 1}
localStorage.getItem("name") //caibin,读取保存在localStorage对象里名为name的变量的值
localStorage.name // "caibin"
localStorage.valueOf() //读取存储在localStorage上的所有数据
localStorage.key(0) // 读取第一条数据的变量名(键值)
//遍历并输出localStorage里存储的名字和值
for(var i=0; i&localStorage.i++){
console.log('localStorage里存储的第'+i+'条数据的名字为：'+localStorage.key(i)+',值为：'+localStorage.getItem(localStorage.key(i)));
删除某个变量
localStorage.removeItem("name"); //undefined
localStorage // Storage {length: 0} 可以看到之前保存的name变量已经从localStorage里删除了
检查localStorage里是否保存某个变量
// 这些数据都是测试的，是在我当下环境里的，只是demo哦～
localStorage.hasOwnProperty('name') // true
localStorage.hasOwnProperty('sex')
将数组转为本地字符串
var arr = ['aa','bb','cc']; // ["aa","bb","cc"]
localStorage.arr = arr //["aa","bb","cc"]
localStorage.arr.toLocaleString(); // "aa,bb,cc"
将JSON存储到localStorage里
var students = {
xiaomin: {
name: "xiaoming",
name: "teemo",
students = JSON.stringify(students);
//将JSON转为字符串存到变量里
console.log(students);
localStorage.setItem("students",students);//将变量存到localStorage里
var newStudents = localStorage.getItem("students");
newStudents = JSON.parse(students); //转为JSON
console.log(newStudents); // 打印出原先对象
说一下这个纠结的东西：简单说是跨js传递json值，通过localStorage中转，有种压缩和解压缩的味道在。其实应该有个公共的变量.js放在最前面，会不会更好呢。我好像是在这样一个场景下用到的：后台传递json格式的经纬度给前台，前台让它在地图上渲染出来，而且是两个不同的js文件传递，然后就使用了这个方法。不过现在想想应该有其它更好的解决方法吧。输入关键字或相关内容进行搜索
更好的预览效果看这
在使用plus.storage频繁地存取数据时，可以感觉到明显的卡顿，而且很耗内存，
在切换到localstorage时虽然效率很高，页面渲染速度明显变快了，且手机发热不明显，不过又遇到了存储瓶颈（一般&=5M）,
因此折中采取了plus.storage与localStorage混合的方案：
当localStorage达到存储瓶颈时切换到plus.storage封装的方法基本上和plus.storage没区别。关于plus.storage参考接口\n
通过键key检索获取应用存储的值
\nvar item=myStorage.getItem(key);
参数key: DOMString必选
存储的键值
返回值DOMString : 键key对应应用存储的值，如果没有则返回null。
说明：方法内部默认先从localStorage取值，没有再从plus.Storage取值
修改或添加键值(key-value)对数据到应用数据存储中
\nvoid myStorage.setItem(key, value);
说明：方法默认将数据存储在localStorage中，超出localStorage容量限制则存到plus.storage中
获取localStorage中保存的键值对的个数
\nvar len=myStorage.getLength();
getLengthPlus
获取plus.storage中保存的键值对的个数
removeItem
通过key值删除键值对存储的数据
\nvoid myStorage.removeItem();
清除应用所有的键值对存储数据
\nvoid myStorage.clear();
获取localStorage键值对中指定索引值的key值
\nvar foo = myStorage.key(index);
获取plus.storage键值对中指定索引值的key值
\nvar foo = myStorage.keyPlus(index);
getItemByIndex
通过键key检索获取应用存储localStorage的值
\nvar item=myStorage.getItemByIndex(index);
参数index: Number必选 存储键值的索引
返回值DOMString : 键key对应应用存储的值，如果没有则返回null。
getItemByIndexPlus
通过键key检索获取应用存储的值
\nvar item=myStorage.getItemByIndexPlus(index);
参数index: Number必选 存储键值的索引
返回值DOMString : 键key对应应用存储的值，如果没有则返回null。
通过键key检索获取应用存储的值
\nvar items=myStorage.getItems(key)
参数 key: Number可选 存储键值的索引
返回值Array：不传key参则返回所有对象，否则返回含有该key的对象
removeItemByKeys
清除指定前缀的存储对象
\nvoid myStorage.removeItemBykeys(keys,cb)
参数keys：DOMString或Array, 必选 keys为String,方法内部自动转换为Array
参数cb：Function 可选
\n说明\n以上方法经常用到的还是getItem setItem
getItems在测试或控制台查看时倒是偶尔用得到
removeItemBykeys是结合本地文件common.cache.clear缓存清除时一齐使用的\n代码已分享到github
也可直接使用压缩后的代码
这也能想到，有才！
封装的非常好
，原来plus.storage这么消耗性能。。幸好自己一开始就没用
要回复文章请先或
相关代码及分享在/phillyx将cookie转换为localStorage以兼容不支持localStorage的浏览器
将cookie转换为localStorage以兼容不支持localStorage的浏览器
以前看到有人说chrome不支持cookie 还费了好大劲把localStorage修改为cookie,
在这互联网高速发展的时代。我们尽可能的向后兼容。
今天就做了一个localStorage 让用户所有浏览器都支持localS
具体内容怎么写的还请详看！
//检测浏览器是否支持localStorage
if(typeof localStorage == 'undefined'){
//创建localStorage
var localStorageClass = function(){
this.options = {
expires : 60*24*3600,
&&& domain :
localStorageClass.prototype = {
//初实化。添加过期时间
init:function(){
&&& var date =
new Date();
date.setTime(date.getTime() + 60*24*3600);
this.setItem('expires',date.toGMTString());
&&& //内部函数
参数说明(key) 检查key是否存在
findItem:function(key){
&&& var bool =
document.cookie.indexOf(key);
&&& if( bool
&&& return
&&& }else{
&&& return
//得到元素值 获取元素值 若不存在则返回 null
getItem:function(key){&&&
&&& var i =
this.findItem(key);
&&& var array =
document.cookie.split(';')&&&
&&& for(var
j=0;j&array.j++){
arraySplit = array[j];
if(arraySplit.indexOf(key) & -1){
&var getValue = array[j].split('=');
getValue[0] trim删除两端空格
&getValue[0] = getValue[0].replace(/^\s\s*/,
'').replace(/\s\s*$/, '')
if(getValue[0]==key){
&&& return
getValue[1];
&&& }else{
&&& return
//重新设置元素
setItem:function(key,value){
var i = this.findItem(key)
document.cookie=key+'='+
//清除cookie 参数一个或多一
clear:function(){
for(var cl =0 ;cl&arguments.cl++){
&&& var date =
new Date();
date.setTime(date.getTime() - 100);
document.cookie =arguments[cl] +"=a; expires=" +
date.toGMTString();
}&&&&&&&&&&
localStorage = new localStorageClass();
localStorage.init();
localStorage.setItem('QQ1','');
localStorage.setItem('QQ2','');
document.write('QQ1: '+
localStorage.getItem('QQ2')+'&br
document.write('QQ2: '+localStorage.getItem('QQ1'));
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。13182人阅读
javascript（6）
JSON数据存储在本地，需调用JSON.stringify()将其转为字符串。读取出来后调用JSON.parse()将字符串转为json格式。
如写入的时候：
var json_data = {id:12,name:&yang&,email:&&};
storage.setItem(&json_data&,JSON.stringify(json_data));
读取的时候：
var json_data = JSON.parse(storage.getItem(&json_data&));
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：146265次
积分：1632
积分：1632
排名：千里之外
原创：16篇
转载：35篇
评论：16条
(1)(1)(2)(1)(2)(2)(1)(3)(3)(2)(1)(3)(2)(7)(2)(1)(6)(2)(1)(4)(3)(1)}