vue 本地存储localStorage以及它的封装接口store.js的使用

27人阅读 评论(0) 收藏 举报
分类:

本地存储localstorage

localstorage 是 HTML5 提供的在客户端存储数据的新方法,主要作用是将数据保存在客户端中,并且数据是永久保存的,除非人为干预删除。

localstorage作为本地存储来使用,解决了cookie存储空间不足的问题:cookie中每条cookie的存储空间为4k,但localStorage的存储空间有5M大小。另外,相比于cookie,localStorage可以节约带宽,在同一个域内,浏览器每次向服务器发送请求,http都会带着cookie,使cookie在浏览器和服务器之间来回传递,浪费带宽,但localStorage将第一次请求的数据直接存储到本地,避免了来回传递。

localstorage 的局限
1、只有版本较高的浏览器中才支持 localstorage
2、localStorage的值的类型限定为string类型,使用 JSON 时需转换
3、如果存储内容过多会消耗内存空间,导致页面变卡,因为localStorage本质上是对字符串的读取

localstorage 有两种方法:分别是 localstorage 和 sessionStorage 。sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。localStorage与sessionStorage的唯一区别就是localStorage属于永久性存储,而sessionStorage在当会话结束的时候,sessionStorage中的键值对会被清空。

localstorage的用法
我们在使用localStorage的时候,需要先判断浏览器是否支持localStorage这个属性:

if(window.localStorage){
 alert("浏览器支持localStorage");
 
 }else{
 alert("浏览器支持localStorage");
 }​

接下来分别是它的写入、读取、删除

//localStorage的写入
var storage=window.localStorage;
 storage["a"]=1;   //写入a字段
 storage.b=2;   //写入b字段
 storage.setItem("c",3);   //写入c字段
 console.log(typeof storage["a"]);  //string
 console.log(typeof storage["b"]);  //string
 console.log(typeof storage["c"]);​//string 
//localStorage的读取
var a=storage.a;
 console.log(a);  //1
var b=storage["b"];
 console.log(b);  //2
var c=storage.getItem("c");
 console.log(c);​  //3
//localStorage的删除
storage.clear();  //将localStorage的所有内容清除

使用key()方法,获取相应的键

var storage=window.localStorage;
 storage.a=1;
 storage.setItem("c",3);
 for(var i=0;i<storage.length;i++){
 var key = storage.key(i);
 console.log(key);  //a  c
 }​

对用户访问页面的次数进行计数:

if(localStorage.pagecount){
 localStorage.pagecount = Number(localStorage.pagecount)+1;
 }else{
 localStorage.pagecount = 1;
 }
 document.write("你第"+localStorage.pagecount+"访问该页面");​

sessionStorage的用法和localStorage一样用法和localStorage一样,但是关闭计数页面后再打开时会重新开始计数。

store.js

GitHub地址
store.js 是一个兼容所有浏览器的 LocalStorage 包装器,不需要借助 Cookie 或者 Flash来实现。它提供非常了简洁的 API 来实现跨浏览器的本地存储功能。

store.js的使用

store.js的基本API有:

store.set(key, val)  //存储 key 的值为 val;
store.get(key)  //获取 key 的值;
store.remove(key) //移除 key 的记录;
store.clear()  //清空存储;
store.getAll() //返回所有存储;
store.forEach() //遍历所有存储。

使用store.js提供的方法,需要先引入store.min.js插件:

<script type="text/javascript" src="store.min.js"></script> 

首先判断浏览器是否支持本地存储

<script type="text/javascript">
    init();
    function init(){
        if(!store.enabled){
            alert("你的浏览器不支持本地存储,请使用更高版本的浏览器");
            return;
        }else{
            ......
            }
 </script>  

set
单个存储字符
格式:store.set(key, data[, overwrite]);

store.set('name','mavis'); //存储name的值为 mavis
store.set('name','angel');  //将name的值存储为angel

在控制台显示

get
获取存入的key值
格式:store.get(key[, alt])

store.set('name','mavis');
store.set('name','angel');
store.get('name');  //angel

remove
移除key的记录

store.remove('name');

在控制台可以看到name的值已经被移除

clear
清除所有本地存储:store.clear();

getAll
从所有存储中获取值
格式:store.getAll()

store.set('name','mavis');
store.getAll().user.name == 'mavis';   //true

forEach
遍历所有的值

store.set('user',{name:'mavis',likes:'javascript'}); // 存储对象 - 自动调用 JSON.stringify
var user = store.get('user'); // 获取存储的对象 - 自动执行 JSON.parse
store.forEach(function(key, val) {
                  console.log(key, '==', val)
            })  // 遍历所有存储

使用store,js简化了使用localStorage原生方法的操作

LocalStorage 并没有提供过期时间接口,只能通过存储时间做比对实现。

最后介绍一下在浏览器中查看LocalStorage的方法:F12打开开发人员工具→Application→Storage→LocalStorage

查看评论

javascript之store.js 轻松实现本地存储(LocalStorage)

摘要: store.js 是一个实现了浏览器的本地存储的 JavaScript 封装 API,不是通过 Cookie 和 Flash 技术实现,而是使用 localStorage、globalStor...
  • kingmax54212008
  • kingmax54212008
  • 2017-06-29 19:14:20
  • 969

轻松实现本地存储(LocalStorage)-store.js

store.js 是一个兼容所有浏览器的 LocalStorage 包装器,不需要借助 Cookie 或者 Flash。store.js 会根据浏览器自动选择使用 localStorage、globa...
  • guoquanyou
  • guoquanyou
  • 2016-02-25 08:28:46
  • 916

在vue中,localStorage本地存储应用。

1、先存在localStorage里面。 localStorage.setItem('indexUrl','#/IndexA'); 2、在用到的时候,获取数据 //获取本地 this.in...
  • weixin_39845746
  • weixin_39845746
  • 2018-01-12 20:00:58
  • 452

HTML5 localStorage设置失效时间,使用store.js

localStorage本地存储,设置失效时间
  • foreveryang321
  • foreveryang321
  • 2015-10-29 09:15:54
  • 4836

本地存储localStorage以及它的封装接口store.js的使用

点击打开链接
  • qq_23614619
  • qq_23614619
  • 2018-03-01 22:44:30
  • 19

实例以及详解localStorage进行本地存储

localStorage的使用方法 localStorage的方法非常简单,就是基本的增删查 几点注意 存储在 localStorage 里面的数据没有过期时间(expiration time...
  • kingrome2017
  • kingrome2017
  • 2017-07-21 09:20:27
  • 943

vue.js 页面跳转传值 localStorage本地存储

one 页面:html                           复制链接,邀请亲友      js:     methods:{             //亲友号 copy:f...
  • qq_35363709
  • qq_35363709
  • 2017-10-24 16:55:29
  • 368

Vue 2.0 起步 (3) 数据流 vuex 和 LocalStorage 实例 - 微信公众号 RSS

参考: Vue 2.0 起步(2) 组件及vue-router实例 - 微信公众号RSSVue 2.0 起步(1) 脚手架工具vue-cli + Webstorm 2016 + webp...
  • sinat_17775997
  • sinat_17775997
  • 2017-03-01 19:16:40
  • 5858

跨浏览器本地存储-Store.js

store.js是一个跨浏览器的数据本地存储 JS 框架,可以在不依赖 cookie 和 Flash 的情况下把数据保存在客户端。store.js最大的优点就是很好地解决了一些老版本浏览器不支持htm...
  • u012558554
  • u012558554
  • 2016-04-06 10:03:26
  • 515

localStorage实现本地储存(永久性的,再木没有删除情况下)

1.假如我需要对从后台请求到的json数组进行本地存储,然后以后就可以减少ajax请求,我是这么做的:  var resultData;//本地储存 if(typeof(w...
  • u014029186
  • u014029186
  • 2016-10-12 15:18:46
  • 2019
    个人资料
    持之以恒
    等级:
    访问量: 41万+
    积分: 6237
    排名: 4967
    技术交流
    QQ联系方式:326202439
    最新评论