通过JavaScript实现三种本地存储的方法

缪金谷 179 0

通过JavaScript实现三种本地存储的方法

一、cookie

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时,cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递,在连接关闭后,服务端不会记录用户的信息。

cookie有path(路径)的概念,可以限制cookie只属于某个路径下。(当获取不到cookie的时候,试试看是否路径设置的不同)

cookie数据不能超过4k

1、创建一个cookie

//简单创建cookie(默认根路径,默认浏览器关闭销毁)
document.cookie = "username=tachmiao";
//添加相对时间和路径(cookie有效期延长1000秒)
document.cookie = "username=tachmiao;max-age=1000; path=/";
//添加绝对日期和路径(直接设置日期)
document.cookie = "username=tachmiao;expires=Sun,31 Dec 2017 12:00:00 UTC;path=/";

var oDate = new Date();
oDate.setDate(oDate.getDate()+1)
document.cookie = "username=tachmiao;expires="+oDate+";path=/"

2、删除/改变一个cookie

删除/改变与创建相同,重新设置下cookie,

删除只要将时间改成负的就好,可以理解成时间到期了cookie就删除了。

3、读取cookie

var cookie = document.cookie;
//返回的是字符串,需要自己拆分

cookie封装

//设置/增加/删除一个cookie
//setCookie(cookie名,cookie值,保存天数)
function setCookie(cname, cvalue, exdays) {
   var d = new Date();
   d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
   var expires = "expires="+d.toUTCString();
   document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

//查找一个cookie
//getCookie(cookie名)
//找不到将会返回''
function getCookie(cname) {
   var name = cname + "=";
   var ca = document.cookie.split(';');
   for(var i = 0; i < ca.length; i++) {
       var c = ca[i];
       while (c.charAt(0) == ' ') {
           c = c.substring(1);
        }
       if (c.indexOf(name)  == 0) {
           return c.substring(name.length, c.length);
        }
   }
   return "";
}


二、localStorage

localStorage是没有时间限制的数据存储,窗口或浏览器关闭也一直保存,因此用作持久数据。

localStorage不会自动把数据发给服务器,仅在本地保存,数据可以达到5M或更大。

创建和访问

localStorage.name="tachmiao";
console.log(localStorage.name);

localStorage.setItem('name','tachmiao')
console.log(localStorage.getItem('name'))

删除

//全部删除
localStorage.clear()
//删除某一个
localStorage.removeItem('name')


三、sessionStorage

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除,它不会自动把数据发给服务器,仅在本地保存,数据可以达到5M或更大。

创建和访问

sessionStorage.name="tachmiao";
console.log(sessionStorage.name);


四、如何查看cookie、localStorage、sessionStorage

F12打开浏览器控制台,选择Application,可以看到保存的内容

目录导航
  • 通过JavaScript实现三种本地存储的方法
      • 一、cookie
        • 1、创建一个cookie
        • 2、删除/改变一个cookie
        • 3、读取cookie
        • cookie封装
      • 二、localStorage
        • 创建和访问
        • 删除
      • 三、sessionStorage
        • 创建和访问
      • 四、如何查看cookie、localStorage、sessionStorage
  • 发表评论 (已有0条评论)

    还木有评论哦,快来抢沙发吧~