精华内容
下载资源
问答
  • JavaScript 本地存储

    2021-08-23 14:47:33
    JavaScript 本地存储

    目录

    本地储存

    1. 本地储存

    2. window.sessionStorage

    3. window.localStorage


    本地储存

    1. 本地储存

    随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。

    本地存储特性

    1、数据存储在用户浏览器中

    2、设置、读取方便、甚至页面刷新不丢失数据

    3、容量较大,sessionStorage约5M、localStorage约20M

    4、只能存储字符串,可以将对象JSON.stringify() 编码后存储

    2. window.sessionStorage

    1、生命周期为关闭浏览器窗口

    2、在同一个窗口(页面)下数据可以共享

    3. 以键值对的形式存储使用

    存储数据:

    sessionStorage.setItem(key, value)

    获取数据:

    sessionStorage.getItem(key)

    删除数据:

    sessionStorage.removeItem(key)

    删除所有数据:

    sessionStorage.clear()

    3. window.localStorage

    1、声明周期永久生效,除非手动删除 否则关闭页面也会存在

    2、可以多窗口(页面)共享(同一浏览器可以共享)

    3. 以键值对的形式存储使用

    存储数据:

    localStorage.setItem(key, value)

    获取数据:

    localStorage.getItem(key)

    删除数据:

    localStorage.removeItem(key)

    删除所有数据:

    localStorage.clear()

    展开全文
  • JavaScript本地存储

    2021-05-02 16:22:15
    JavaScript本地存储 为什么会用本地存储 随着互联网的发展,页面的运用越来越普遍,同时也越来越复杂,为了满足各种各样的需求,会经常在本地存储大量的数据,html5提出了相关的解决方案 本地存储的特性 (1)数据...

    JavaScript本地存储

    1. 为什么会用本地存储
      随着互联网的发展,页面的运用越来越普遍,同时也越来越复杂,为了满足各种各样的需求,会经常在本地存储大量的数据,html5提出了相关的解决方案
    2. 本地存储的特性
      (1)数据存储在用户浏览器中,
      (2)设置读取方便,甚至刷新页面也不会丢失数据
      (3)容量较大, localStorage约20M,约sessionStorage 5M
      (4)只能存储字符串,可以用json.stringfy()编码后存储
    展开全文
  • js本地存储

    千次阅读 2019-05-12 10:15:45
    以下面这条数据作为数据源 const userList = [ { id: '13426', ...特点:5M左右存储空间,存储没有时间限制,支持IE8以上浏览器 // 把 JSON 对象转化为字符串存到localStorage localStorage.se...

    以下面这条数据作为数据源

    const  userList = [
    	{
    		id: '13426',
    		name: '张三'
    	}{
    		id: '13427',
    		name: '李四'
    	}
    ]
    

    localStorage

    特点:5M左右存储空间,存储没有时间限制,支持IE8以上浏览器

    //  把 JSON 对象转化为字符串存到localStorage
    localStorage.setItem('user', JSON.stringify(userList ))
    
    //  取值并把字符串转为 JSON 对象
    JSON.parse(localStorage.getItem('user'))
    
    //  移除特定localStorage中的数据
    localStorage.removeItem('user')
    
    //  清空localStorage
    localStorage.clear()
    
    

    sessionStorage

    特点:5M左右存储空间,仅在当前会话下有效,关闭页面或浏览器后被清除

    //  添加sessionStorage并转为字符串形式
    sessionStorage.setItem('user', JSON.stringify(userList ))
    
    //  获取sessionStorage并转为JSON对象
    JSON.parse(sessionStorage.getItem('user'))
    
    //  移除特定sessionStorage中的数据
    sessionStorage.removeItem('user')
    
    //  清空sessionStorage
    sessionStorage.clear()
    
    

    cookie

    特点: 一般由服务器生成,可设置失效时间,携带在HTTP头中

    function setcookie(name,value,days){
        const cookie = name + '=' + encodeURIComponent(value);
        if(typeof days== 'number'){
            cookie += ';max-age='+(days*60*60*24);
        }
        document.cookie = cookie;
     }
     setcookie('username','laike',6)
     
    
    展开全文
  • 下面小编就为大家带来一篇基于js 本地存储(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了JavaScript本地储存:localStorage、sessionStorage、cookie的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 各种储存方案 cookies: 浏览器均支持,容量为4KB LocalStorage: HTML5,容量为5M sessionStorage: HTML5,容量为5M UserData:仅IE支持,容量为64KB Flash:100KB,非HTML原生,需要插件支持 Google Gears SQLite...

    各种储存方案

    cookies: 浏览器均支持,容量为4KB
    LocalStorage: HTML5,容量为5M
    sessionStorage: HTML5,容量为5M
    UserData:仅IE支持,容量为64KB
    Flash:100KB,非HTML原生,需要插件支持
    Google Gears SQLite :需要插件支持,容量无限制
    globalStorage:Firefox独有的,Firefox13开始就不再支持这个方法
    
    UserData仅IE支持, Google Gears SQLite需要插件,Flash已经伴随着HTML5的出现渐渐退出了历史舞台
    

    Cookie
    Cookie特点

    cookie大小限制为4kb
    只要有请求涉及cookie,cookie就要在服务器与客户端来回传送
    cookie会随请求到服务器,js操作cookie比较繁琐
    

    Session

    session机制是一种服务器端的机制
    Cookie和Session简单对比

    cookie客户端 session 服务器
    session 占用资源
    单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie
    cookie 不安全
    建议: - 将登陆信息等重要信息存放为SESSION
        其他信息如果需要保留,可以放在cookie中
    

    cookie语法

    读取cookie allCookies = document.cookie;
    写入cookie document.cookie = updatedCookie;
    ;path=*path* (例如 '/', '/mydir') 如果没有定义,默认为当前文档位置的路径。
    ;domain=*domain* (例如 'example.com', '.example.com' (包括所有子域名), 'subdomain.example.com') 如果没有定义,默认为当前文档位置的路径的域名部分。
    ;max-age=*max-age-in-seconds* (例如一年为606024*365)
    ;expires=*date-in-GMTString-format* 如果没有定义,cookie会在对话结束时过期这个值的格式参见Date.toUTCString()
    ;secure (cookie只通过https协议传输)
    

    LocalStorage

    这是一种持久化的存储方式,也就是说如果不手动清除,数据就永远不会过期。 它也是采用Key - Value的方式存储数据,底层数据接口是sqlite,按域名将数据分别保存到对应数据库文件里。它能保存更大的数据(IE8上是10MB,Chrome是5MB),同时保存的数据不会再发送给服务器,避免带宽浪费。
    

    LocalStorage的属性与方法
    属性方法 说明
    localStorage.length 获得storage中的个数
    localStorage.key(n) 获得storage中第n个元素对的键值(第一个元素是0)
    localStorage.key 获取键值key对应的值
    localStorage.getItem(key) 获取键值key对应的值
    localStorage.setItem(key, value) 添加数据,键值为key,值为value
    localStorage.removeItem(key) 移除键值为key的数据
    localStorage.clear() 清除所有数据

    var arrDisplay = [0, 1, 1, 1];
    localStorage.setItem(“menuTitle”, arrDisplay);
    localStorage.getItem(“menuTitle”);
    localStorage.clear()

    LocalStorage缺点

    localStorage大小限制在500万字符左右,各个浏览器不一致
    localStorage在隐私模式下不可读取
    localStorage本质是在读写文件,数据多的话会比较卡(firefox会一次性将数据导入内存,想想就觉得吓人啊)
    localStorage不能被爬虫爬取,不要用它完全取代URL传参/
    

    uniapp本地储存
    uni.setStorage(OBJECT)
    将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。

    uni.setStorage({
        key: 'storage_key',
        data: 'hello',
        success: function () {
            console.log('success');
        }
    });
    

    uni.setStorageSync(KEY,DATA)
    将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。

    try {
        uni.setStorageSync('storage_key', 'hello');
    } catch (e) {
        // error
    }
    

    uni.getStorage(OBJECT)
    从本地缓存中异步获取指定 key 对应的内容。

    uni.getStorage({
        key: 'storage_key',
        success: function (res) {
            console.log(res.data);
        }
    });
    

    uni.getStorageSync(KEY)
    从本地缓存中同步获取指定 key 对应的内容。

    try {
        const value = uni.getStorageSync('storage_key');
        if (value) {
            console.log(value);
        }
    } catch (e) {
        // error
    }
    

    uni.getStorageInfo(OBJECT)
    异步获取当前 storage 的相关信息。

    uni.getStorageInfo({
        success: function (res) {
            console.log(res.keys);
            console.log(res.currentSize);
            console.log(res.limitSize);
        }
    });
    

    uni.getStorageInfoSync()
    同步获取当前 storage 的相关信息。

    try {
        const res = uni.getStorageInfoSync();
        console.log(res.keys);
        console.log(res.currentSize);
        console.log(res.limitSize);
    } catch (e) {
        // error
    }
    

    uni.removeStorage(OBJECT)
    从本地缓存中异步移除指定 key。

    uni.removeStorage({
        key: 'storage_key',
        success: function (res) {
            console.log('success');
        }
    });
    

    uni.removeStorageSync(KEY)
    从本地缓存中同步移除指定 key。

    try {
        uni.removeStorageSync('storage_key');
    } catch (e) {
        // error
    }
    

    uni.clearStorage()
    清理本地数据缓存。
    直接调用即可!

    uni.clearStorageSync()
    同步清理本地数据缓存。

    try {
        uni.clearStorageSync();
    } catch (e) {
        // error
    }
    
    展开全文
  • 本地存储数据加载到页面: 从本地存储中获取数据,并由字符串基础类型转换为对象类型(存储至堆内存中) 初始化变量data 为空数组(变量data存储在栈内存中) 将获取的数据赋值给变量data (实质为:将堆内存中的...
  • 简介 localStorage会可以将第一次请求的数据直接存储本地,这个相当于一个5M大小的针对于前端页面的数据库 ——注意:在IE8以上的IE版本才支持localStorage这个属性。localStorage属于永久性存储,如果存储内容...
  • JavaScript本地存储详解

    2021-08-19 23:05:25
    本地存储使用过程中的注意事项 7. Cookie 8.localStorage和sessionStorage和Cookie的区别 1.作用 保存数据 2.特点 将数据保存到本地(浏览器客户端中) 3.localStorage使用 语法:设置值 localStorage.setItem('...
  • 目录 背景回顾 sessionstorage与localStorage对比 使用注意 使用场景 vue中sessionStorage.js封装与使用 ... HTML5中与本地存储相关的两个重要内容:Web Storage与本地数据库。其中,Web Storage存储机制是对...
  • 基于js本地存储详解

    2019-08-01 10:42:46
    1、JS中的本地存储: 使用JS向浏览器的某一个位置中存储一些内容,浏览器即使关闭了,存储的信息也不会销毁,当在重新打开浏览器的时候我们依然可以获取到上一次存储的信息 本地存储的方案: 传统: cookie:把信息...
  • JS本地存储操作

    2019-09-26 04:35:09
    //本地存储操作var localStorageUtils = { setParam: function (name, value) { if (value) { localStorage.setItem(name, JSON.stringify(value)); } }, getParam: function (nam...
  • js本地存储数据方式

    千次阅读 2015-04-07 13:41:52
    WEB应用的快速发展,是的本地存储一些数据也成为一种重要的需求,实现的方案也有很多,最普通的就是cookie了,大家也经常都用,但是cookie的缺点是显而易见的,其他的方案比如:IE6以上的userData,Firefox下面的...
  • js本地存储localStorage

    2016-11-23 15:51:12
    /** * 存储在本地 的数据 * 优点: * 1. 速度快 ,不需要向服务器发请求 * 2. 存储量大,约5MB ...* 3....* 4....* cookie与本地存储的区别 * 1. cookie也是存在本地 * 2. cookie存储的数据量小 一般4KB左路 * 3.
  • 小程序 存储 wx.setStorageSync('name', "小明") 取 wx.getStorageSync('name') //小明 删除 wx.removeStorageSync('name') ...JavaScript 存储 localStorage.setItem("name","小明") 取 loca
  • js本地存储 localstorage

    万次阅读 2016-07-19 11:03:46
    HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示:   最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只...
  • js本地存储兼容版本

    2019-03-31 01:39:20
    NULL 博文链接:https://every-best.iteye.com/blog/1386259
  • 1、localStorage本地存储 localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不...
  • js本地储存详解

    千次阅读 2017-06-17 15:15:09
    各种储存方案  cookies: 浏览器均支持,容量为4KB  LocalStorage: HTML5,容量为5M  sessionStorage: HTML5,容量为5M  UserData:仅IE支持,容量为64KB  Flash:100KB,非HTML原生,需要插件支持 ...
  • 请问各位大老,js本地存储是什么,有什么功能,该如何运用
  • js本地存储解决方案(localStorage与userData)
  • localForage 是一个 JavaScript 库,提升了应用程序的离线体验,通过使用异步的数据存储,提供简单的类似 localStorage 的 API,允许开发者存储多种类型数据。 示例代码: // In localStorage, we would do: ...
  • JS 本地存储 和 会话存储

    千次阅读 2019-07-10 09:41:49
    localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。 sessionStorage用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。仅刷新页面不会删除数据。 1、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 174,253
精华内容 69,701
关键字:

js本地存储