Leon's Blogging

Coding blogging for hackers.

JavaScript - localStorage, sessionStorage, Location, Window, Date, Destructuring, Module

| Comments

localStorage

  • 優點：存放不會消失，不需擔心頁面關閉/重整/新開分頁等問題
  • 缺點：因為永久存放(除非user手動清除)，必須加上時效性自行判斷，或特殊操作時要將其手動清除

localStorage 只能存 string

1
2
3
4

localStorage.setItem('foo', 'bar')
console.log(localStorage.getItem('foo'))
localStorage.removeItem('foo')
localStorage.clear() // delete all

如果要存 array, object 必須先轉成 string

1
2
3
4
5
6

userJSON = JSON.stringify(user)
localStorage.setItem('user', userJSON)

userString = localStorage.getItem('user')
userParse = JSON.parse(userString)
console.log(`${userParse.name} and ${userParse.age}`)

sessionStorage

  • 優點：頁籤開著時會一直存在，重新整理也不會消失，頁籤關閉時會自動銷毀被儲存的資訊
  • 缺點：只存在於當前頁籤，開新分頁並不會被傳遞
1
2
3
4
5
6
7
8
9
10
11

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
let data = sessionStorage.getItem('key');

// Remove saved data from sessionStorage
sessionStorage.removeItem('key');

// Remove all saved data from sessionStorage
sessionStorage.clear();

location

The Location interface represents the location (URL) of the object it is linked to

1
2
3
4
5

// 轉址到 google
location.assign('http://www.google.com/')

// 取得網址後面參數
location.hash.substring(1)

Window

The Window interface represents a window containing a DOM document

1
2
3
4

// 跨頁面同步資料, 透過 listen 'storage' 是否改變去做同步
window.addEventListener('storage', function (e) {
// Will fire for localStorage changes that come from a different page
})

Date 

1
2
3
4
5

const dateOne = new Date('March 1 2017 12:00:00')
const month = dateOne.getMonth() + 1
const day = dateOne.getDate()
const year = dateOne.getFullYear()
console.log(`${month}/${day}/${year}`)

1
2
3

const date = new Date('March 1 2017 12:00:00')
const timestamp = date.getTime()
console.log(timestamp) // Will print 1488387600000

1
2

const timestamp = 1488387600000
const date = new Date(timestamp)

解構賦值 Destructuring

透過 mapping 屬性名稱，給予賦值

In Object

1
2
3
4
5
6
7
8
9
10

const todo = {
  id: 'ididididididid',
  text: 'Pay the bills',
  completed: false
}
const { text: todoText, completed, details = 'No details provided', ...others } = todo
console.log(todoText) // "Pay the bills"
console.log(completed) // false
console.log(details) // "No details provided"
console.log(others) // { id: "ididididididid" }

In function arguments

1
2
3
4
5
6
7
8
9

const todo = {
  id: 'asdfpoijwermasdf',
  text: 'Pay the bills',
  completed: false
}
const printTodo = ({ text, completed }) => {
  console.log(`${text}: ${completed}`)
}
printTodo(todo)

In Array

1
2
3
4

const age = [65, 0, 13]
const [firstAge, ...otherAges] = age
console.log(firstAge) // 65
console.log(otherAges) // [0, 13]

Object 解構是以名稱做對應，Array 則是以順序為對應

1
2
3
4
5

let [a, , c] = [1, 2, 3]
console.log(a, c) // 1, 3

let {a, ,c} = {a:1, b:2, c:3}
console.log(a,c) // Error

解構用於提取 json 值時，非常方便

1
2
3
4
5
6
7
8
9
10
11
12

let foo = {
  a: 1,
  b: 'bar',
  c: {
    d: 'hi',
    e: 'hello'
  }
}

let { a, b, c } = foo
console.log(a, b, c)
// 1 'bar' { d: 'hi', e: 'hello' }

Module

Named export

1
2
3
4
5
6
7
8

// utilities.js
export const add = (a, b) => a + b
export const subtract = (a, b) => a - b

// index.js
import { add, subtract } from './utilities'
console.log(add(32, 1)) // 33
console.log(subtract(32, 1)) //  31

default export

1
2
3
4
5

// utilities.js
const add = (a, b) => a + b
const subtract = (a, b) => a - b
const square = (x) => x * x
export { add, subtract, square as default }

1
2
3
4

// index.js
import otherSquare, { add } from './utilities'
console.log(add(32, 1)) // 33
console.log(otherSquare(10)) // 100

Comments