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

xiaolinbang 发布于2019-08-20 12:26 / 1616人阅读

摘要：本地存储是提供的在客户端存储数据的新方法，主要作用是将数据保存在客户端中，并且数据是永久保存的，除非人为干预删除。的使用的基本有存储的值为获取的值移除的记录清空存储返回所有存储遍历所有存储。

本地存储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
对用户访问页面的次数进行计数:
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插件:
 

首先判断浏览器是否支持本地存储
  
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

GPU云服务器云服务器 localstorage使用 localstorage存储存储localstorage 免费localstorage存储对象

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80981.html

本地存储localStorage的封装，提供简单的API

摘要：是一个实现了浏览器的本地存储的封装，不是通过和技术实现，而是使用。小弟我主要是用于，，手机等先进浏览器里面跑。 showImg(https://img.shields.io/github/issues/jaywcjlove/store.js.svg); showImg(https://img.shields.io/github/forks/jaywcjlove/store.js.svg...

Miyang 2019-08-21 12:38 评论0 收藏0
推荐轻量高效无依赖的开源JS插件和库

摘要：弹出层是一个轻量级的库用于管理工具提示和弹窗效果。一个带有的跨浏览器富文本编辑器。由制作，适用于每天写作的富文本编辑器。轻量的操作库。是一个快速简单轻量级的浏览器功能检测库。它没有任何的依赖，并且压缩后仅有。极小跨平台的全屏插件。在这里维持一个持续更新的地方图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本。demo Lightgallery.js -...

AlphaWallet 2019-08-02 15:56 评论0 收藏0
推荐轻量高效无依赖的开源JS插件和库

摘要：弹出层是一个轻量级的库用于管理工具提示和弹窗效果。一个带有的跨浏览器富文本编辑器。由制作，适用于每天写作的富文本编辑器。轻量的操作库。是一个快速简单轻量级的浏览器功能检测库。它没有任何的依赖，并且压缩后仅有。极小跨平台的全屏插件。在这里维持一个持续更新的地方图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本。demo Lightgallery.js -...

lushan 2019-08-30 13:09 评论0 收藏0
推荐轻量高效无依赖的开源JS插件和库

摘要：弹出层是一个轻量级的库用于管理工具提示和弹窗效果。一个带有的跨浏览器富文本编辑器。由制作，适用于每天写作的富文本编辑器。轻量的操作库。是一个快速简单轻量级的浏览器功能检测库。它没有任何的依赖，并且压缩后仅有。极小跨平台的全屏插件。在这里维持一个持续更新的地方图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本。demo Lightgallery.js -...

shuibo 2019-08-22 10:44 评论0 收藏0